Tabs

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Tabs
  active="first"
/>

Legacy mount name: data-component="Tabs".

Props and attributes

Slots

• first
• second

Events

• click

Source contract

Installed source: components/Tabs.wrn

component Tabs {
  props {
    class = ""
    active = "first"
  }
  state current = active
  view {
        <div class="{class}">
        <div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800">
        <button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button>
        <button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button>
        </div>
        <div data-show="current === 'first'" role="tabpanel" class="pt-5">
        <slot name="first" />
        </div>
        <div data-show="current === 'second'" role="tabpanel" class="pt-5">
        <slot name="second" />
        </div>
        </div>
    }
}