Lzh on GitHub

Toolbar

用于对一组控件（例如按钮、工具栏组或下拉菜单）进行分组的容器。
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
import { ref } from 'vue'

const toggleStateSingle = ref('center')
const toggleStateMultiple = ref([])
</script>

<template>
  <ToolbarRoot
    class="flex p-[10px] w-full max-w-[610px] !min-w-max rounded-lg bg-white shadow-sm border"
    aria-label="Formatting options"
  >
    <ToolbarToggleGroup
      v-model="toggleStateMultiple"
      type="multiple"
      aria-label="Text formatting"
    >
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="bold"
        aria-label="Bold"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:font-bold"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="italic"
        aria-label="Italic"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:font-italic"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="strikethrough"
        aria-label="Strike through"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:strikethrough"
        />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarToggleGroup
      v-model="toggleStateSingle"
      type="single"
      aria-label="Text Alignment"
    >
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="left"
        aria-label="Left Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-left"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="center"
        aria-label="Center Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-center"
        />
      </ToolbarToggleItem>
      <ToolbarToggleItem
        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-xs leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
        value="right"
        aria-label="Right Aligned"
      >
        <Icon
          class="w-[15px] h-[15px]"
          icon="radix-icons:text-align-right"
        />
      </ToolbarToggleItem>
    </ToolbarToggleGroup>
    <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
    <ToolbarLink
      class="bg-transparent !font-normal !text-mauve11 inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-xs leading-none bg-white ml-0.5 outline-none hover:bg-green3 hover:text-grass11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green-500 data-[state=on]:text-grass11"
      href="#"
      target="_blank"
      style="margin-right: 10"
    >
      Edited 2 hours ago
    </ToolbarLink>
    <ToolbarButton
      class="px-[10px] text-white font-semibold bg-green-700 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-xs leading-none items-center justify-center outline-none hover:bg-green-900 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7"
      style="margin-left: auto"
    >
      Share
    </ToolbarButton>
  </ToolbarRoot>
</template>

功能特点

  • 完整的键盘导航。

安装

从命令行安装组件。

$ npm add reka-ui

结构

导入组件。

<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

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

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
dir'ltr' | 'rtl'组合框（如果适用）的阅读方向。如果省略，则从 ConfigProvider 全局继承或假定为从左到右 (LTR) 阅读模式。
loopfalseboolean当为 true 时，键盘导航将从最后一个选项卡循环到第一个选项卡，反之亦然。
orientation'horizontal''vertical' | 'horizontal'工具栏的方向。

数据属性

属性值
[data-orientation]"vertical" | "horizontal"

Button

一个按钮项。

属性默认值类型描述
as'button'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
disabledfalseboolean

数据属性

属性值
[data-orientation]"vertical" | "horizontal"

Link

一个链接项。

属性默认值类型描述
as'a'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。

ToggleGroup

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

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
defaultValueAcceptableValue | AcceptableValue[]项目的默认活动值。当您不需要控制项目状态时使用。
dir'ltr' | 'rtl'组合框（如果适用）的阅读方向。如果省略，则从 ConfigProvider 全局继承或假定为从左到右 (LTR) 阅读模式。
disabledfalseboolean当为 true 时，阻止用户与切换组及其所有项目交互。
loopfalseboolean当 loop 和 rovingFocus 为 true 时，键盘导航将从最后一项循环到第一项，反之亦然。
modelValueAcceptableValue | AcceptableValue[]活动项目的受控值。当您需要控制项目状态时使用。可以与 v-model 绑定。
namestring字段的名称。作为名称/值对的一部分与其所属表单一起提交。
orientation'vertical' | 'horizontal'组件的方向，它决定了焦点如何移动：horizontal 用于左右箭头，vertical 用于上下箭头。
requiredfalseboolean当为 true 时，表示用户必须在提交所属表单之前设置值。
rovingFocusfalseboolean当为 false 时，使用箭头键导航项目将被禁用。
type'single' | 'multiple'确定一次可以选择“单个”或“多个”项目。此 prop 将覆盖从 modelValue 和 defaultValue 推断的类型。

触发事件 (Emit)

事件名称Payload描述
update:modelValue[payload: AcceptableValue | AcceptableValue[]]切换值更改时调用的事件处理程序。

数据属性

属性值
[data-orientation]"vertical" | "horizontal"

ToggleItem

组中的一个项目。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
disabledfalseboolean当为 true 时，阻止用户与切换器交互。
value*AcceptableValue切换组项的字符串值。切换组中的所有项都应使用唯一值。

数据属性

属性值
[data-state]"on" | "off"
[data-disabled]禁用时存在
[data-orientation]"vertical" | "horizontal"

Separator

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

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。

数据属性

属性值
[data-orientation]"vertical" | "horizontal"

示例

与其他原语一起使用

我们所有公开 Trigger 部分的原语，例如 Dialog、AlertDialog、Popover、DropdownMenu，都可以通过使用 asChild prop 在工具栏中组合。

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

<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将焦点移动到组中的第一个项目。
Space激活/取消激活项目。
Enter激活/取消激活项目。
ArrowDown根据 orientation 将焦点移动到下一个项目。
ArrowRight根据 orientation 将焦点移动到下一个项目。
ArrowUp根据 orientation 将焦点移动到上一个项目。
ArrowLeft根据 orientation 将焦点移动到上一个项目。
Home将焦点移动到第一个项目。
End将焦点移动到最后一个项目。