选项卡导航

带有选项卡样式链接的导航菜单。

查看源代码报告问题在 Playground 中查看

<TabNav.Root>
  <TabNav.Link href="#" active>
    Account
  </TabNav.Link>
  <TabNav.Link href="#">Documents</TabNav.Link>
  <TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>

API 参考

此组件基于导航菜单基本组件，并支持通用边距属性。

根

包含导航菜单链接。

属性	类型	默认值
`大小`	`响应式<"1" \| "2">`	`"2"`
`换行`	`响应式<"nowrap" \| "wrap" \| "wrap-reverse">`	无默认值
`对齐`	`响应式<"start" \| "center" \| "end">`	无默认值
`颜色`	`枚举`	无默认值
`高对比度`	`布尔值`	无默认值

链接

单个导航菜单链接。

属性	类型	默认值
`作为子元素`	`布尔值`	无默认值
`活动`	`布尔值`	`false`

示例

大小

使用 大小 属性来控制选项卡的大小。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root size="1">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root size="2">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

颜色

使用 颜色 属性来为选项卡列表分配一个特定的颜色。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="indigo">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="cyan">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="orange">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="crimson">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

高对比度

使用 高对比度 属性来增强与背景的对比度。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="gray">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="gray" highContrast>
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

使用路由链接

使用 作为子元素 属性来组合 TabNav.Link 与您的应用程序路由链接组件。

<TabNav.Root>
  <TabNav.Link asChild active={pathname === '/account'}>
    <NextLink href="/account">Account</NextLink>
  </TabNav.Link>
  <TabNav.Link asChild active={pathname === '/documents'}>
    <NextLink href="/documents">Documents</NextLink>
  </TabNav.Link>
  <TabNav.Link asChild active={pathname === '/settings'}>
    <NextLink href="/settings">Settings</NextLink>
  </TabNav.Link>
</TabNav.Root>

上一个选项卡

下一个文本区域

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

工具

选项卡导航