navigation
Tabs
Radix UI ベースのタブパネル。アンダーライン（line）とピル（solid）の 2 種類のバリアントを用意し、キーボード操作にも対応。
インポート
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@stella-ds/react'TabsTabsListTabsTriggerTabsContent
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| variant | 'line' | 'solid' | 'line' | Visual style — underline or pill/box |
Preview
Overview content goes here.
使用例
Basic
<Tabs defaultValue="overview" variant="line">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview">Overview content</TabsContent>
<TabsContent value="settings">Settings content</TabsContent>
</Tabs>