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

标签

¥Tabs

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

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

    Can be controlled or uncontrolled.

    Supports horizontal/vertical orientation.

    Supports automatic/manual activation.

    Full keyboard navigation.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-tabs

结构

¥Anatomy

导入所有部分并将它们组合在一起。

¥Import all parts and piece them together.

import { Tabs } from "radix-ui";



export default () => (

	<Tabs.Root>

		<Tabs.List>

			<Tabs.Trigger />

		</Tabs.List>

		<Tabs.Content />

	</Tabs.Root>

);

API 参考

¥API Reference

根

¥Root

包含所有标签的组件。

¥Contains all the tabs component parts.

PropTypeDefault
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 attributeValues
[data-orientation]"vertical" | "horizontal"

列表

¥List

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

¥Contains the triggers that are aligned along the edge of the active content.

PropTypeDefault
asChild
boolean
false
loop
boolean
true
Data attributeValues
[data-orientation]"vertical" | "horizontal"

触发器

¥Trigger

激活其关联内容的按钮。

¥The button that activates its associated content.

PropTypeDefault
asChild
boolean
false
value*
string
No default value
disabled
boolean
false
Data attributeValues
[data-state]"active" | "inactive"
[data-disabled]

Present when disabled

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

内容

¥Content

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

¥Contains the content associated with each trigger.

PropTypeDefault
asChild
boolean
false
value*
string
No default value
forceMount
boolean
No default value
Data attributeValues
[data-state]"active" | "inactive"
[data-orientation]"vertical" | "horizontal"

示例

¥Examples

垂直

¥Vertical

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

¥You can create vertical tabs by using the orientation prop.

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>

);

可访问性

¥Accessibility

遵循 标签 WAI-ARIA 设计模式。

¥Adheres to the Tabs WAI-ARIA design pattern.

键盘交互

¥Keyboard Interactions

KeyDescription
Tab
When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown
Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowRight
Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowUp
Moves focus to the previous trigger depending on orientation and activates its associated content.
ArrowLeft
Moves focus to the previous trigger depending on orientation and activates its associated content.
Home
Moves focus to the first trigger and activates its associated content.
End
Moves focus to the last trigger and activates its associated content.
Previous切换
Next提示框