组件

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

相关导出

  • Tabs
  • TabsList
  • TabsTrigger
  • TabsContent
  • tabsListVariants

继续阅读