Radix 主页
由 WorkOS 出品
Radix 主页
由 WorkOS 出品
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studiesBlog
组件

选项卡

一组分层的内容部分（称为选项卡面板），一次显示一个。

import * as React from "react";

import { Tabs } from "radix-ui";

import "./styles.css";



const TabsDemo = () => (

	<Tabs.Root className="TabsRoot" defaultValue="tab1">

		<Tabs.List className="TabsList" aria-label="Manage your account">

			<Tabs.Trigger className="TabsTrigger" value="tab1">

				Account

			</Tabs.Trigger>

			<Tabs.Trigger className="TabsTrigger" value="tab2">

				Password

			</Tabs.Trigger>

		</Tabs.List>

		<Tabs.Content className="TabsContent" value="tab1">

			<p className="Text">

				Make changes to your account here. Click save when you're done.

			</p>

			<fieldset className="Fieldset">

				<label className="Label" htmlFor="name">

					Name

				</label>

				<input className="Input" id="name" defaultValue="Pedro Duarte" />

			</fieldset>

			<fieldset className="Fieldset">

				<label className="Label" htmlFor="username">

					Username

				</label>

				<input className="Input" id="username" defaultValue="@peduarte" />

			</fieldset>

			<div
				style={{ display: "flex", marginTop: 20, justifyContent: "flex-end" }}
			>

				<button className="Button green">Save changes</button>

			</div>

		</Tabs.Content>

		<Tabs.Content className="TabsContent" value="tab2">

			<p className="Text">

				Change your password here. After saving, you'll be logged out.

			</p>

			<fieldset className="Fieldset">

				<label className="Label" htmlFor="currentPassword">

					Current password

				</label>

				<input className="Input" id="currentPassword" type="password" />

			</fieldset>

			<fieldset className="Fieldset">

				<label className="Label" htmlFor="newPassword">

					New password

				</label>

				<input className="Input" id="newPassword" type="password" />

			</fieldset>

			<fieldset className="Fieldset">

				<label className="Label" htmlFor="confirmPassword">

					Confirm password

				</label>

				<input className="Input" id="confirmPassword" type="password" />

			</fieldset>

			<div
				style={{ display: "flex", marginTop: 20, justifyContent: "flex-end" }}
			>

				<button className="Button green">Change password</button>

			</div>

		</Tabs.Content>

	</Tabs.Root>

);



export default TabsDemo;

功能特性

    可以是受控的或非受控的。

    支持水平/垂直方向。

    支持自动/手动激活。

    完整的键盘导航。

安装

从命令行安装组件。

npm install @radix-ui/react-tabs

结构

导入所有部件并将它们组装在一起。

import { Tabs } from "radix-ui";



export default () => (

	<Tabs.Root>

		<Tabs.List>

			<Tabs.Trigger />

		</Tabs.List>

		<Tabs.Content />

	</Tabs.Root>

);

API 参考

根组件

包含所有选项卡组件部件。

属性类型默认值
asChild
布尔值
false
defaultValue
字符串
无默认值
value
字符串
无默认值
onValueChange
函数
无默认值
orientation
枚举
"horizontal"
dir
枚举
无默认值
activationMode
枚举
"automatic"
数据属性值
[data-orientation]"vertical" |"horizontal"

列表

包含沿活动内容边缘对齐的触发器。

属性类型默认值
asChild
布尔值
false
loop
布尔值
true
数据属性值
[data-orientation]"vertical" |"horizontal"

触发器

激活其关联内容的按钮。

属性类型默认值
asChild
布尔值
false
value*
字符串
无默认值
disabled
布尔值
false
数据属性值
[data-state]"active" |"inactive"
[data-disabled]

禁用时呈现

[data-orientation]"vertical" |"horizontal"

内容

包含与每个触发器关联的内容。

属性类型默认值
asChild
布尔值
false
value*
字符串
无默认值
forceMount
布尔值
无默认值
数据属性值
[data-state]"active" |"inactive"
[data-orientation]"vertical" |"horizontal"

示例

垂直

您可以使用 orientation 属性创建垂直选项卡。

import { Tabs } from "radix-ui";



export default () => (

	<Tabs.Root defaultValue="tab1" orientation="vertical">

		<Tabs.List aria-label="tabs example">

			<Tabs.Trigger value="tab1">One</Tabs.Trigger>

			<Tabs.Trigger value="tab2">Two</Tabs.Trigger>

			<Tabs.Trigger value="tab3">Three</Tabs.Trigger>

		</Tabs.List>

		<Tabs.Content value="tab1">Tab one content</Tabs.Content>

		<Tabs.Content value="tab2">Tab two content</Tabs.Content>

		<Tabs.Content value="tab3">Tab three content</Tabs.Content>

	</Tabs.Root>

);

可访问性

遵循 Tabs WAI-ARIA 设计模式。

键盘交互

键描述
Tab
当焦点移动到选项卡时，焦点会放在活动触发器上。当触发器获得焦点时，焦点会移动到活动内容。
ArrowDown
根据 orientation 将焦点移动到下一个触发器并激活其关联的内容。
ArrowRight
根据 orientation 将焦点移动到下一个触发器并激活其关联的内容。
ArrowUp
根据 orientation 将焦点移动到上一个触发器，并激活其关联的内容。
ArrowLeft
根据 orientation 将焦点移动到上一个触发器，并激活其关联的内容。
Home
将焦点移动到第一个触发器并激活其关联的内容。
End
将焦点移动到最后一个触发器并激活其关联的内容。
上一个Switch
下一个Toast
在 GitHub 上编辑此页。