切换组

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

import * as React from "react";
import { ToggleGroup } from "radix-ui";
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 { ToggleGroup } from "radix-ui";

export default () => (
	<ToggleGroup.Root>
		<ToggleGroup.Item />
	</ToggleGroup.Root>
);

API 参考

根

包含切换组的所有部分。

属性	类型	默认值
`asChild`	`boolean`	`false`
`type*`	`enum`	无默认值
`value`	`string`	无默认值
`defaultValue`	`string`	无默认值
`onValueChange`	`function`	无默认值
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	无默认值
`disabled`	`boolean`	`false`
`rovingFocus`	`boolean`	`true`
`orientation`	`enum`	`undefined`
`dir`	`enum`	无默认值
`loop`	`boolean`	`true`

数据属性	值
`[data-orientation]`	`"vertical" \|"horizontal"`

Item

组中的一个项目。

属性	类型	默认值
`asChild`	`boolean`	`false`
`value*`	`string`	无默认值
`disabled`	`boolean`	无默认值

数据属性	值
`[data-state]`	`"on" \|"off"`
`[data-disabled]`	禁用时出现
`[data-orientation]`	`"vertical" \|"horizontal"`

示例

确保始终有一个值

您可以控制组件以确保一个值。

import * as React from "react";
import { ToggleGroup } from "radix-ui";

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>
	);
};

可访问性

使用 roving tabindex 管理项目之间的焦点移动。

键盘交互

键	描述
`Tab`	将焦点移动到按下的项目或组中的第一个项目。
`Space`	激活/停用项目。
`Enter`	激活/停用项目。
`ArrowDown`	将焦点移动到组中的下一个项目。
`ArrowRight`	将焦点移动到组中的下一个项目。
`ArrowUp`	将焦点移动到组中的上一个项目。
`ArrowLeft`	将焦点移动到组中的上一个项目。
`Home`	将焦点移动到第一个项目。
`End`	将焦点移动到最后一个项目。

上一个切换

下一个工具栏

在 GitHub 上编辑此页面。

概述

指南

组件

实用工具

切换组

功能