工具栏

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

import React from 'react';
import * as Toolbar from '@radix-ui/react-toolbar';
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 * as Toolbar from '@radix-ui/react-toolbar';

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`

切换组

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

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

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

切换项

组中的一个项目。

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

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

分隔符

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

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

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

示例

与其他基元一起使用

我们所有公开 Trigger 部分的基元，例如 Dialog、AlertDialog、Popover、DropdownMenu，可以通过使用 asChild 属性在工具栏内进行组合。

以下是如何使用我们的 DropdownMenu 基元的示例。

import * as Toolbar from '@radix-ui/react-toolbar';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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

无障碍

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

键盘交互

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

上一个切换组

下一个工具提示

在 GitHub 上编辑此页面。

概览

指南

组件

实用工具

功能