Skies.ui元件 (Components)
Tabs 分頁
Skies.ui Tabs：Radix 分頁，鍵盤可操作，List／Trigger／Content 分離；無障礙與版面範例。
Tabs 分頁
Tabs 由 Radix Tabs 組成：TabsList 放 TabsTrigger，對應內容放在 TabsContent，以相同的 value 字串綁定。
預設用法
這裡是預覽區塊。
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@skies-ui/ui";
export function Example() {
return (
<Tabs defaultValue="preview">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="preview">預覽</TabsTrigger>
<TabsTrigger value="code">程式碼</TabsTrigger>
</TabsList>
<TabsContent value="preview">…</TabsContent>
<TabsContent value="code">…</TabsContent>
</Tabs>
);
}受控模式
使用 value 與 onValueChange 由外部狀態驅動（例如 URL 或 useState）。
無障礙與版面
- 觸發器會帶
role="tab"，內容區為role="tabpanel"；請維持value唯一。 TabsList可加上className="grid w-full grid-cols-3"等，讓多個TabsTrigger均分寬度。
API 摘要
| 元件 | 說明 |
|---|---|
Tabs | 根；defaultValue / value / onValueChange / orientation（預設橫向） |
TabsList | 觸發器列；建議包在同一視覺群組內 |
TabsTrigger | 分頁鈕；必填 value |
TabsContent | 面板；value 須與觸發器對應 |
套件中 TabsList / TabsTrigger / TabsContent 為 Client Component；Tabs 根節點亦需在 Client 邊界內使用。