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;

Features

可以是可控或不可控的。

支持水平/垂直方向。

支持自动/手动激活。

完全的键盘导航。

安装

从命令行安装组件。

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

根节点

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultValue`	`string`	No default value
`value`	`string`	No default value
`onValueChange`	`function`	No default value
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	No default value
`activationMode`	`enum`	`"automatic"`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

列表

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`loop`	`boolean`	`true`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

触发器

激活其关联内容的按钮。

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	禁用时存在
`[data-orientation]`	`"vertical" \| "horizontal"`

内容

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`forceMount`	`boolean`	No default value

Data attribute	Values
`[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.Trigger value="tab1">一</Tabs.Trigger>
			<Tabs.Trigger value="tab2">二</Tabs.Trigger>
			<Tabs.Trigger value="tab3">三</Tabs.Trigger>
		</Tabs.List>
		<Tabs.Content value="tab1">选项卡一内容</Tabs.Content>
		<Tabs.Content value="tab2">选项卡二内容</Tabs.Content>
		<Tabs.Content value="tab3">选项卡三内容</Tabs.Content>
	</Tabs.Root>
);

可访问性

遵循选项卡 WAI-ARIA 设计模式。

键盘交互

Key	Description
`Tab`	当焦点移动到选项卡时，聚焦活动触发器。当触发器获得焦点时，焦点移动到活动内容。
`ArrowDown`	根据 `orientation` 移动焦点到下一个触发器，并激活其关联内容。
`ArrowRight`	根据 `orientation` 移动焦点到下一个触发器，并激活其关联内容。
`ArrowUp`	根据 `orientation` 移动焦点到上一个触发器，并激活其关联内容。
`ArrowLeft`	根据 `orientation` 移动焦点到上一个触发器，并激活其关联内容。
`Home`	将焦点移动到第一个触发器并激活其关联内容。
`End`	将焦点移动到最后一个触发器并激活其关联内容。