Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

标签导航

带有标签样式链接的导航菜单。

View sourceReport an issueView in 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 参考

¥API Reference

此组件基于 导航菜单基础组件 并支持 常用边距属性。

¥This component is based on the Navigation Menu primitive and supports common margin props.

根

¥Root

包含导航菜单链接。

¥Contains the navigation menu links.

PropTypeDefault
size
Responsive<"1" | "2">
"2"
wrap
Responsive<"nowrap" | "wrap" | "wrap-reverse">
No default value
justify
Responsive<"start" | "center" | "end">
No default value
color
enum
No default value
highContrast
boolean
No default value

链接

¥Link

单独的导航菜单链接。

¥An individual navigation menu link.

PropTypeDefault
asChild
boolean
No default value
active
boolean
false

示例

¥Examples

尺寸

¥Size

使用 size 属性控制标签的大小。

¥Use the size prop to control the size of the tabs.

<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>

颜色

¥Color

使用 color 属性将特定的 color 分配给标签列表。

¥Use the color prop to assign a specific color to the tab list.

<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>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<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>

与路由链接一起使用

¥With router links

使用 asChild 属性将 TabNav.Link 与应用的路由链接组件组合。

¥Use the asChild prop to compose TabNav.Link with your app’s router link component.

<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>
Previous标签
Next文本区域