Skies.ui元件 (Components)
Tabs 分頁
Skies.ui 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>
);
}安裝
npx skies-ui@latest add tabs見 安裝與 CLI。
受控模式
使用 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 邊界內使用。