Reka UI 徽标Reka
backdrop
示例
组件

工具栏

一个用于分组控件的容器，例如按钮、工具栏组或下拉菜单。

功能

  • 完整的键盘导航。

安装

从命令行安装此组件。

sh
$ npm add reka-ui

结构

导入组件。

vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton />
    <ToolbarSeparator />
    <ToolbarLink />
    <ToolbarToggleGroup>
      <ToolbarToggleItem />
    </ToolbarToggleGroup>
  </ToolbarRoot>
</template>

API 参考

根组件

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

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

dir
'ltr' | 'rtl'

适用时，组合框的阅读方向。
如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。

loop
布尔值

当为 true 时，键盘导航将从最后一个选项卡循环到第一个，反之亦然。

orientation
'horizontal'
'vertical' | 'horizontal'

工具栏的方向

数据属性值
[data-orientation]"垂直" | "水平"

按钮

一个按钮项。

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

disabled
布尔值
数据属性值
[data-orientation]"垂直" | "水平"

一个链接项。

属性默认类型
as
'a'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

切换组

一组可切换开/关的双状态按钮。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

defaultValue
AcceptableValue | AcceptableValue[]

项的默认活动值。

当您不需要控制项的状态时使用。

dir
'ltr' | 'rtl'

适用时，组合框的阅读方向。
如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。

disabled
布尔值

当为 true 时，阻止用户与切换组及其所有项进行交互。

loop
布尔值

当 loop 和 rovingFocus 为 true 时，键盘导航将从最后一项循环到第一项，反之亦然。

modelValue
AcceptableValue | AcceptableValue[]

活动项的受控值。

当您需要控制项的状态时使用此项。可以通过 v-model 进行绑定

name
string

字段的名称。随其所属的表单一起作为名称/值对提交。

orientation
'vertical' | 'horizontal'

组件的方向，决定了焦点如何移动：horizontal 用于左右箭头，vertical 用于上下箭头。

required
布尔值

当为 true 时，表示用户必须在所属表单提交前设置值。

rovingFocus
布尔值

当 `false` 时，禁用使用箭头键在项目间导航。

type
'single' | 'multiple'

确定一次可以选择“单个”或“多个”项。

此属性将覆盖从 modelValue 和 defaultValue 推断的类型。

事件触发载荷
update:modelValue
[payload: AcceptableValue | AcceptableValue[]]

当切换组件的值改变时调用的事件处理程序。

数据属性值
[data-orientation]"垂直" | "水平"

切换项

组中的一个项。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

disabled
布尔值

当为 true 时，阻止用户与切换组件交互。

值*
AcceptableValue

切换组项的字符串值。切换组中的所有项都应使用唯一值。

数据属性值
[data-state]"on" | "off"
[data-disabled]禁用时存在
[data-orientation]"垂直" | "水平"

分隔符

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

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

数据属性值
[data-orientation]"垂直" | "水平"

示例

与其他基本组件一起使用

我们所有暴露 Trigger 部分的基本组件，例如 Dialog、AlertDialog、Popover、DropdownMenu，都可以通过使用 asChild prop 在工具栏中进行组合。

这是一个使用我们的 DropdownMenu 基本组件的示例。

vue
<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton>Action 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as-child>
        <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
      </ToolbarButton>
      <DropdownMenuContent>…</DropdownMenuContent>
    </DropdownMenuRoot>
  </ToolbarRoot>
</template>

可访问性

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

键盘交互

键描述
Tab 键
将焦点移动到组中的第一个项。
空格键
激活/取消激活该项。
回车键
激活/取消激活该项。
向下箭头键
根据 orientation 移动焦点到下一项。
向右箭头
根据 orientation 移动焦点到下一项。
向上箭头键
根据 orientation 移动焦点到上一项。
向左箭头
根据 orientation 移动焦点到上一项。
Home 键
将焦点移动到第一个项。
End 键
将焦点移动到最后一个项。