工具栏

用于将一组控件（例如按钮、工具栏分组或下拉菜单）进行分组的容器。

View code

功能

完整的键盘导航。

安装

从命令行安装组件。

$ 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 参考

Root

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`loop`		`boolean` When `true`, keyboard navigation will loop from last tab to first, and vice versa.
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the toolbar

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Button

一个按钮项。

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Link

一个链接项。

Prop	Default	Type
`as`	`'a'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ToggleGroup

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`AcceptableValue \| AcceptableValue[]` The default active value of the item(s). Use when you do not need to control the state of the item(s).
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`		`boolean` When `true`, prevents the user from interacting with the toggle group and all its items.
`loop`		`boolean` When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item to first, and vice versa.
`modelValue`		`AcceptableValue \| AcceptableValue[]` The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with `v-model`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`		`'vertical' \| 'horizontal'` The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`rovingFocus`		`boolean` When `false`, navigating through the items using arrow keys will be disabled.
`type`		`'single' \| 'multiple'` Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.

Emit	Payload
`update:modelValue`	`[payload: AcceptableValue \| AcceptableValue[]]` Event handler called when the value of the toggle changes.

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

ToggleItem

分组中的一个项。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the toggle.
`value*`		`AcceptableValue` A string value for the toggle group item. All items within a toggle group should use a unique value.

Data Attribute	Value
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	禁用时出现
`[data-orientation]`	`"vertical" \| "horizontal"`

Separator

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

示例

与其他基元一起使用

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

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

vue

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

<template>
  <ToolbarRoot>
    <ToolbarButton>操作 1</ToolbarButton>
    <ToolbarSeparator />
    <DropdownMenuRoot>
      <ToolbarButton as-child>
        <DropdownMenuTrigger>触发器</DropdownMenuTrigger>
      </ToolbarButton>
      <DropdownMenuContent>…</DropdownMenuContent>
    </DropdownMenuRoot>
  </ToolbarRoot>
</template>

无障碍访问

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

键盘交互

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

工具栏 ​

功能 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Button ​

Link ​

ToggleGroup ​

ToggleItem ​

Separator ​

示例 ​

与其他基元一起使用 ​

无障碍访问 ​

键盘交互 ​

工具栏

功能

安装

结构