工具栏

用于对一组控件（如按钮、切换按钮组或下拉菜单）进行分组的容器。

import * as React from "react";
import { Toolbar } from "radix-ui";
import {
	StrikethroughIcon,
	TextAlignLeftIcon,
	TextAlignCenterIcon,
	TextAlignRightIcon,
	FontBoldIcon,
	FontItalicIcon,
} from "@radix-ui/react-icons";
import "./styles.css";

const ToolbarDemo = () => (
	<Toolbar.Root className="ToolbarRoot" aria-label="Formatting options">
		<Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="bold"
				aria-label="Bold"
			>
				<FontBoldIcon />
			</Toolbar.ToggleItem>
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="italic"
				aria-label="Italic"
			>
				<FontItalicIcon />
			</Toolbar.ToggleItem>
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="strikethrough"
				aria-label="Strike through"
			>
				<StrikethroughIcon />
			</Toolbar.ToggleItem>
		</Toolbar.ToggleGroup>
		<Toolbar.Separator className="ToolbarSeparator" />
		<Toolbar.ToggleGroup
			type="single"
			defaultValue="center"
			aria-label="Text alignment"
		>
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="left"
				aria-label="Left aligned"
			>
				<TextAlignLeftIcon />
			</Toolbar.ToggleItem>
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="center"
				aria-label="Center aligned"
			>
				<TextAlignCenterIcon />
			</Toolbar.ToggleItem>
			<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="right"
				aria-label="Right aligned"
			>
				<TextAlignRightIcon />
			</Toolbar.ToggleItem>
		</Toolbar.ToggleGroup>
		<Toolbar.Separator className="ToolbarSeparator" />
		<Toolbar.Link
			className="ToolbarLink"
			href="#"
			target="_blank"
			style={{ marginRight: 10 }}
		>
			Edited 2 hours ago
		</Toolbar.Link>
		<Toolbar.Button className="ToolbarButton" style={{ marginLeft: "auto" }}>
			Share
		</Toolbar.Button>
	</Toolbar.Root>
);

export default ToolbarDemo;

功能特性

完整的键盘导航。

安装

从命令行安装组件。

npm install @radix-ui/react-toolbar

解剖结构

导入组件。

import { Toolbar } from "radix-ui";

export default () => (
	<Toolbar.Root>
		<Toolbar.Button />
		<Toolbar.Separator />
		<Toolbar.Link />
		<Toolbar.ToggleGroup>
			<Toolbar.ToggleItem />
		</Toolbar.ToggleGroup>
	</Toolbar.Root>
);

API 参考

根

包含所有工具栏组件部件。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`orientation`	`枚举`	`"horizontal"`
`dir`	`枚举`	无默认值
`loop`	`布尔值`	`true`

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

按钮

一个按钮项。

属性	类型	默认值
`asChild`	`布尔值`	`false`

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

链接

一个链接项。

属性	类型	默认值
`asChild`	`布尔值`	`false`

ToggleGroup

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`type*`	`枚举`	无默认值
`value`	`字符串`	无默认值
`defaultValue`	`字符串`	无默认值
`onValueChange`	`函数`	无默认值
`value`	`字符串数组`	`[]`
`defaultValue`	`字符串数组`	`[]`
`onValueChange`	`函数`	无默认值
`disabled`	`布尔值`	`false`

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

ToggleItem

组中的一个项目。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`value*`	`字符串`	无默认值
`disabled`	`布尔值`	无默认值

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

分隔符

用于在工具栏中视觉上分隔项目。

属性	类型	默认值
`asChild`	`布尔值`	`false`

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

示例

与其他 primitives 一起使用

我们所有的 primitives 都公开了一个 Trigger 部分，例如 Dialog、AlertDialog、Popover、DropdownMenu 可以通过使用 asChild 属性在工具栏中组合。

这是一个使用我们的 DropdownMenu primitive 的示例。

import { Toolbar, DropdownMenu } from "radix-ui";

export default () => (
	<Toolbar.Root>
		<Toolbar.Button>Action 1</Toolbar.Button>
		<Toolbar.Separator />
		<DropdownMenu.Root>
			<Toolbar.Button asChild>
				<DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
			</Toolbar.Button>
			<DropdownMenu.Content>…</DropdownMenu.Content>
		</DropdownMenu.Root>
	</Toolbar.Root>
);

可访问性

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

键盘交互

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

上一个切换按钮组

下一个工具提示

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

功能特性