Tabs
分頁式內容切換。v0.4.0 改為巢狀語法 (Blade 槽位可自然傳遞，無 XSS 顧慮)。<x-tab name="..." label="...">content</x-tab> 列在 <x-tabs> 內。variant：underline (預設) / boxed / pill、size：sm / md / lg。default 指定初始作用 name (省略時為首分頁)。Alpine x-data 保持客戶端作用狀態。
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>