组件
Tabs
用于同层级内容切换和面板分栏
Tabs
Tabs 用于在同一层级的内容块之间切换。
导入
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@downcity/ui";最小示例
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@downcity/ui";
export function SettingsTabs() {
return (
<Tabs defaultValue="general" className="max-w-2xl">
<TabsList>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<TabsContent value="general">基础设置内容</TabsContent>
<TabsContent value="advanced">高级设置内容</TabsContent>
</Tabs>
);
}TabsList 变体
variant="default"variant="line"
方向
orientation="horizontal"orientation="vertical"
使用建议
TabsTrigger必须放在TabsList里value要和对应的TabsContent对齐- 面板切换适合
Tabs,操作切换适合ToggleGroup
相关导出
TabsTabsListTabsTriggerTabsContenttabsListVariants