Tabs

View Source 

Usage

@import "winduum/src/components/tabs/index.css" layer(components);

Variants

• default 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-stimulus 

Examples

Default

html

<div class="x-tabs accent-main" role="tablist">
    <button class="x-button wide" role="tab" aria-controls="tab-all" id="all" aria-selected="true">
        All
    </button>
    <button class="x-button ghosted" role="tab" aria-controls="tab-photos" id="photos">
        Photos
    </button>
    <button class="x-button ghosted" role="tab" aria-controls="tab-music" id="music">
        Music
    </button>
    <button class="x-button ghosted" role="tab" aria-controls="tab-documents" id="documents">
        Documents
    </button>
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="false" id="tab-all" aria-labelledby="all">
    All
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-photos" aria-labelledby="photos">
    Photos
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-music" aria-labelledby="music">
    Music
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-documents" aria-labelledby="documents">
    Documents
</div>

js

<script type="module">
    import { toggleTab } from "winduum/src/components/tabs"

    const tabElements = document.querySelectorAll('[role="tab"]')
    const tabPanelElements = document.querySelectorAll('[role="tabpanel"]')

    tabElements.forEach(element => {
        element.addEventListener('click', () => {
            tabElements.forEach(target => target.classList.add('ghosted'))
            element.classList.remove('ghosted')

            toggleTab(element, {
                tabElements,
                tabPanelElements
            })
        })
    })
</script>

Custom

html

<div class="x-tabs flex gap-0 p-0 bg-transparent" role="tablist">
    <button class="p-2 border-b-2 border-b-main border-opacity-25 transition aria-selected:border-opacity-100" role="tab" aria-controls="tab-all" aria-selected="true">
        All
    </button>
    <button class="p-2 border-b-2 border-b-main border-opacity-25 transition aria-selected:border-opacity-100" role="tab" aria-controls="tab-photos">
        Photos
    </button>
    <button class="p-2 border-b-2 border-b-main border-opacity-25 transition aria-selected:border-opacity-100" role="tab" aria-controls="tab-music">
        Music
    </button>
    <button class="p-2 border-b-2 border-b-main border-opacity-25 transition aria-selected:border-opacity-100" role="tab" aria-controls="tab-documents">
        Documents
    </button>
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="false" id="tab-all" aria-labelledby="all">
    All
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-photos" aria-labelledby="photos">
    Photos
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-music" aria-labelledby="music">
    Music
</div>
<div class="aria-hidden:hidden" role="tabpanel" aria-hidden="true" id="tab-documents" aria-labelledby="documents">
    Documents
</div>

js

<script type="module">
    import { toggleTab } from "winduum/src/components/tabs"

    const tabElements = document.querySelectorAll('[role="tab"]')
    const tabPanelElements = document.querySelectorAll('[role="tabpanel"]')

    tabElements.forEach(element => element.addEventListener('click', () => {
        toggleTab(element, {
            tabElements,
            tabPanelElements
        })
    }))
</script>

Javascript API

toggleTab

• Type: (element: HTMLElement | Element, options?: ToggleTabOptions) => void
• Kind: sync

Toggles tab and tab panel aria attributes.

ToggleTabOptions

---

tabElements

• Type: NodeListOf<Element>
• Default: undefined

Elements representing tabs.

tabPanelElements

• Type: NodeListOf<Element>
• Default: undefined

Elements representing tab panels.