Tabs
Tab-switched content. Changed to nested syntax in v0.4.0 (naturally pass Blade slots without XSS). Nest <x-tab name="..." label="...">content</x-tab> inside <x-tabs>. variant: underline (default) / boxed / pill. size: sm / md / lg. Set default active name (first tab if omitted). Alpine x-data tracks client-side active state.
default underline / md
製品の全体像です。タブで切り替えて詳細を確認できます。
サイズ・重量・対応 OS などの技術情報。
★★★★☆ 良い感触です（仮テキスト）。
variant = boxed (active = filled primary chip)
アカウント設定パネル。
セキュリティ設定パネル。
請求設定パネル。
variant = pill (subtle base-200 chip)
すべての項目。
アクティブな項目のみ。
完了済みの項目のみ。
sizes — sm / md / lg (underline)
size = sm
One panel.
Two panel.
Three panel.
size = md
One panel.
Two panel.
Three panel.
size = lg
One panel.
Two panel.
Three panel.
default = "specs" — 初期 active タブを指定
概要 (default ではない)
仕様 (初期表示)
レビュー
tab に icon を付ける — icon prop に HTML / pinion-icons 等のレンダリング済 markup を渡す
Home パネル。
Settings パネル。
Profile パネル。
多数のタブ — 横方向は flex-wrap で改行する
Inbox
Drafts
Sent
Spam
Trash
Archive
Important
使い方
{{-- 1. 最小構成 — <x-tabs> の中に <x-tab> を並べる。name は activeTab の値、label がボタン文言、slot がパネル内容 --}}
<x-tabs>
<x-tab name="overview" label="概要"><p>概要</p></x-tab>
<x-tab name="specs" label="仕様"><p>仕様</p></x-tab>
</x-tabs>
{{-- 2. variant / size / default を指定 --}}
<x-tabs variant="boxed" size="lg" default="specs">
<x-tab name="overview" label="概要">…</x-tab>
<x-tab name="specs" label="仕様">…</x-tab>
</x-tabs>
{{-- 3. icon 付き — icon prop に <x-i> 等のレンダリング済 HTML を渡す --}}
<x-tabs>
<x-tab name="home" label="Home" :icon="view('components.i', ['type'=>'home-2','class'=>'w-4 h-4'])->render()">
<p>Home</p>
</x-tab>
</x-tabs>