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

切换组

一组可以切换打开或关闭的双状态按钮。

import React from 'react';

import * as ToggleGroup from '@radix-ui/react-toggle-group';

import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';

import './styles.css';



const ToggleGroupDemo = () => (

  <ToggleGroup.Root
    className="ToggleGroup"
    type="single"
    defaultValue="center"
    aria-label="Text alignment"
  >

    <ToggleGroup.Item className="ToggleGroupItem" value="left" aria-label="Left aligned">

      <TextAlignLeftIcon />

    </ToggleGroup.Item>

    <ToggleGroup.Item className="ToggleGroupItem" value="center" aria-label="Center aligned">

      <TextAlignCenterIcon />

    </ToggleGroup.Item>

    <ToggleGroup.Item className="ToggleGroupItem" value="right" aria-label="Right aligned">

      <TextAlignRightIcon />

    </ToggleGroup.Item>

  </ToggleGroup.Root>

);



export default ToggleGroupDemo;

功能

    完整的键盘导航。

    支持水平/垂直方向。

    支持单个和多个按下按钮。

    可以是受控或不受控的。

安装

从命令行安装组件。

npm install @radix-ui/react-toggle-group

结构

导入组件。

import * as ToggleGroup from '@radix-ui/react-toggle-group';



export default () => (

  <ToggleGroup.Root>

    <ToggleGroup.Item />

  </ToggleGroup.Root>

);

API 参考

根

包含切换组的所有部分。

属性类型默认值
asChild
布尔值
false
type*
枚举
无默认值
value
字符串
无默认值
defaultValue
字符串
无默认值
onValueChange
函数
无默认值
value
字符串数组
[]
defaultValue
字符串数组
[]
onValueChange
函数
无默认值
disabled
布尔值
false
rovingFocus
布尔值
true
orientation
枚举
未定义
dir
枚举
无默认值
loop
布尔值
true
数据属性值
[data-orientation]"vertical" |"horizontal"

项目

组中的一个项目。

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

禁用时出现

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

示例

确保始终存在值

您可以控制组件以确保存在值。

import * as React from 'react';

import * as ToggleGroup from '@radix-ui/react-toggle-group';



export default () => {

  const [value, setValue] = React.useState('left');



  return (

    <ToggleGroup.Root
      type="single"
      value={value}
      onValueChange={(value) => {
        if (value) setValue(value);
      }}
    >

      <ToggleGroup.Item value="left">

        <TextAlignLeftIcon />

      </ToggleGroup.Item>

      <ToggleGroup.Item value="center">

        <TextAlignCenterIcon />

      </ToggleGroup.Item>

      <ToggleGroup.Item value="right">

        <TextAlignRightIcon />

      </ToggleGroup.Item>

    </ToggleGroup.Root>

  );

};

无障碍性

使用 游动 Tab 索引 管理项目之间的焦点移动。

键盘交互

键描述
Tab
将焦点移动到已按下的项目或组中的第一个项目。
空格
激活/停用项目。
回车
激活/停用项目。
向下箭头
将焦点移动到组中的下一个项目。
向右箭头
将焦点移动到组中的下一个项目。
向上箭头
将焦点移动到组中的上一个项目。
向左箭头
将焦点移动到组中的上一个项目。
Home
将焦点移动到第一个项目。
End
将焦点移动到最后一个项目。
上一个切换按钮
下一个工具栏

在 GitHub 上编辑此页面。