# 工具条

用于分组一组控件的容器，例如按钮、切换组或下拉菜单。

## Features

- 完整的键盘导航。

## [结构](#结构)

导入组件。

```jsx
import { Toolbar } from "radix-ui";

export default () => (
  <Toolbar.Root>
    <Toolbar.Button />

    <Toolbar.Separator />

    <Toolbar.Link />

    <Toolbar.ToggleGroup>
      <Toolbar.ToggleItem />
    </Toolbar.ToggleGroup>
  </Toolbar.Root>
);
```

## [API 参考](#api-参考)

### [根部](#根部)

包含所有工具条组件部分。

| Prop          | Type      | Default          |
| ------------- | --------- | ---------------- |
| `asChild`     | `boolean` | `false`          |
| `orientation` | `enum`    | `"horizontal"`   |
| `dir`         | `enum`    | No default value |
| `loop`        | `boolean` | `true`           |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [按钮](#按钮)

一个按钮项。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [链接](#链接)

一个链接项。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

### [切换组](#切换组)

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

| Prop            | Type       | Default          |
| --------------- | ---------- | ---------------- |
| `asChild`       | `boolean`  | `false`          |
| `type*`         | `enum`     | No default value |
| `value`         | `string`   | No default value |
| `defaultValue`  | `string`   | No default value |
| `onValueChange` | `function` | No default value |
| `value`         | `string[]` | `[]`             |
| `defaultValue`  | `string[]` | `[]`             |
| `onValueChange` | `function` | No default value |
| `disabled`      | `boolean`  | `false`          |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [切换项](#切换项)

组中的一个项目。

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | `false`          |
| `value*`   | `string`  | No default value |
| `disabled` | `boolean` | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"on" \| "off"`              |
| `[data-disabled]`    | 被禁用时存在                 |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [分隔符](#分隔符)

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

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## [示例](#示例)

### [与其他原语一起使用](#与其他原语一起使用)

所有暴露 `Trigger` 部分的原语，例如 `Dialog`、`AlertDialog`、`Popover`、`DropdownMenu` 可以通过使用 [`asChild` 属性](/primitives/docs/guides/composition) 在工具条中组合。

以下是使用我们的 `DropdownMenu` 原语的示例。

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

export default () => (
  <Toolbar.Root>
    <Toolbar.Button>操作 1</Toolbar.Button>

    <Toolbar.Separator />

    <DropdownMenu.Root>
      <Toolbar.Button asChild>
        <DropdownMenu.Trigger>触发器</DropdownMenu.Trigger>
      </Toolbar.Button>

      <DropdownMenu.Content>…</DropdownMenu.Content>
    </DropdownMenu.Root>
  </Toolbar.Root>
);
```

## [可访问性](#可访问性)

使用 [游走的 tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) 来管理项目之间的焦点移动。

### [键盘交互](#键盘交互)

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

<!--$-->

<!--/$-->