Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题原生组件原生组件图标图标颜色颜色
文档案例研究博客
组件

选项卡

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

import React from 'react';

import * as Tabs from '@radix-ui/react-tabs';

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 * as Tabs from '@radix-ui/react-tabs';



export default () => (

  <Tabs.Root>

    <Tabs.List>

      <Tabs.Trigger />

    </Tabs.List>

    <Tabs.Content />

  </Tabs.Root>

);

API 参考

根

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

道具类型默认值
asChild
布尔值
假
defaultValue
字符串
无默认值
值
字符串
无默认值
onValueChange
函数
无默认值
方向
枚举
"水平"
方向
枚举
无默认值
activationMode
枚举
"自动"
数据属性值
[data-orientation]"垂直" |"水平"

列表

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

道具类型默认值
asChild
布尔值
假
循环
布尔值
真
数据属性值
[data-orientation]"垂直" |"水平"

触发器

激活其关联内容的按钮。

道具类型默认值
asChild
布尔值
假
值*
字符串
无默认值
禁用
布尔值
假
数据属性值
[data-state]"活动" |"非活动"
[data-disabled]

禁用时出现

[data-orientation]"垂直" |"水平"

内容

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

道具类型默认值
asChild
布尔值
假
值*
字符串
无默认值
forceMount
布尔值
无默认值
数据属性值
[data-state]"活动" |"非活动"
[data-orientation]"垂直" |"水平"

示例

垂直

您可以使用 orientation 道具创建垂直选项卡。

import * as Tabs from '@radix-ui/react-tabs';



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>

);

无障碍性

符合 选项卡 WAI-ARIA 设计模式.

键盘交互

键描述
Tab
当焦点移动到选项卡上时，会聚焦活动触发器。当触发器处于焦点时，焦点会移动到活动内容。
箭头向下
根据 orientation 将焦点移动到下一个触发器并激活其关联内容。
箭头向右
根据 orientation 将焦点移动到下一个触发器并激活其关联内容。
箭头向上
根据 orientation 将焦点移动到上一个触发器，并激活其关联内容。
箭头向左
根据 orientation 将焦点移动到上一个触发器，并激活其关联内容。
Home
将焦点移动到第一个触发器并激活其关联的内容。
结束
将焦点移动到最后一个触发器并激活其关联的内容。
上一个开关
下一个吐司
在 GitHub 上编辑此页面。