Tabs

Docs & Examples

• winduum
• winduum-stimulus

Source

• Tabs.js

Stimulus Actions

toggle

<div class="x-tabs" data-controller="x-tabs">
    <div class="x-tabs-content" role="tablist">
        <button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-all" id="all" aria-selected="true">
            All
        </button>
        <button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-photos" id="photos">
            Photos
        </button>
        <button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-music" id="music">
            Music
        </button>
        <button class="x-button accent-main aria-selected:accent-primary" data-action="x-tabs#toggle" data-x-tabs-target="tab" role="tab" aria-controls="tab-documents" id="documents">
            Documents
        </button>
    </div>
    <div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="false" id="tab-all" aria-labelledby="all">
        All
    </div>
    <div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-photos" aria-labelledby="photos">
        Photos
    </div>
    <div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-music" aria-labelledby="music">
        Music
    </div>
    <div class="aria-hidden:hidden" data-x-tabs-target="tabpanel" role="tabpanel" aria-hidden="true" id="tab-documents" aria-labelledby="documents">
        Documents
    </div>
</div>