Tabs

Source

• Tabs.js

Example CSS

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

/* Example customization */
@layer utilities {
  .x-tabs.is-compact {
    padding: 0.5rem;
  }
}

Winduum CSS Code

winduum/src/components/tabs/list.css

.x-tabs-list {
  background-color: var(--x-tabs-list-background-color, var(--color-body-secondary));
  gap: var(--x-tabs-list-gap, calc(var(--spacing) * 1));
  padding: var(--x-tabs-list-padding, calc(var(--spacing) * 1));
  border-radius: var(--x-tabs-list-border-radius, var(--radius-xl));
  display: flex;
  inline-size: max-content;
}

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>