Skip to content

Tabs


View Source 

Usage

css
@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>
liquid
<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>
liquid
<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.

Released under the MIT License.