Tabs

用于同层级内容切换和面板分栏

Tabs 用于在同一层级的内容块之间切换。

导入

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@downcity/ui";

最小示例

Loading preview…

TabsList 变体

  • variant="default"
  • variant="line"

方向

  • orientation="horizontal"
  • orientation="vertical"

使用建议

  • TabsTrigger 必须放在 TabsList 里
  • value 要和对应的 TabsContent 对齐
  • 面板切换适合 Tabs,操作切换适合 ToggleGroup

相关导出

  • Tabs
  • TabsList
  • TabsTrigger
  • TabsContent
  • tabsListVariants

继续阅读