Radix Vue

外观

工具栏 ​

用于对一组控件进行分组的容器，例如按钮、工具栏组或下拉菜单。
vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'radix-vue'
import { Icon } from '@iconify/vue'
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-md bg-white shadow-[0_2px_10px] shadow-blackA7"
    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-[13px] 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-green5 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-[13px] 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-green5 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-[13px] 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-green5 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-[13px] 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-green5 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-[13px] 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-green5 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-[13px] 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-green5 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-[13px] 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-green5 data-[state=on]:text-grass11"
      href="#"
      target="_blank"
      style="margin-right: 10"
    >
      Edited 2 hours ago
    </ToolbarLink>
    <ToolbarButton
      class="px-[10px] text-white bg-green9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-green10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7"
      style="margin-left: auto"
    >
      Share
    </ToolbarButton>
  </ToolbarRoot>
</template>

功能 ​

  • 完整的键盘导航。

安装 ​

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入组件。

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

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

API 参考 ​

根 ​

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

道具默认值类型
as
'div'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

dir
'ltr' | 'rtl'

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

循环
布尔值

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

方向
'水平'
'垂直' | '水平'

工具栏的方向

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

按钮 ​

按钮项。

道具默认值类型
as
'button'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

禁用
布尔值
数据属性值
[data-orientation]"vertical" | "horizontal"

链接项。

道具默认值类型
as
'a'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

切换组 ​

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

道具默认值类型
as
'div'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

defaultValue
字符串 | 字符串数组

项目(s)的默认活动值。

当您不需要控制项目(s)的状态时使用。

dir
'ltr' | 'rtl'

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

禁用
布尔值

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

循环
布尔值

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

modelValue
字符串 | 字符串数组

活动项目(s)的受控值。

当您需要控制项目的 state 时使用。 可以与 v-model 绑定

方向
'垂直' | '水平'

组件的方向，它决定了焦点的移动方式：horizontal 表示左右箭头，vertical 表示上下箭头。

rovingFocus
布尔值

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

类型
'single' | 'multiple'

确定一次可以按下 "single" 或 "multiple" 项目。

如果定义了 v-model 或 defaultValue，则此 prop 将被忽略，因为类型将从值中推断出来。

发出有效载荷
update:modelValue
[有效载荷：字符串 | 字符串数组]

当值更改时调用的事件处理程序。

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

切换项 ​

组中的项目。

道具默认值类型
as
'div'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

defaultValue
布尔值

切换在首次渲染时的按下状态。 当您不需要控制其打开状态时使用。

禁用
布尔值

当 true 时，会阻止用户与切换交互。

按下
布尔值

切换的受控按下状态。 可以作为 v-model 绑定。

价值*
字符串

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

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

分隔符 ​

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

道具默认值类型
as
'div'
AsTag | 组件

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

asChild
布尔值

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

阅读我们的 组合 指南以了解更多详细信息。

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

示例 ​

与其他基元一起使用 ​

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

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

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

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

无障碍 ​

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

键盘交互 ​

钥匙描述
标签
将焦点移动到组中的第一个项目。
空间
激活/停用项目。
进入
激活/停用项目。
向下箭头
根据 orientation 将焦点移动到下一个项目。
向右箭头
根据 orientation 将焦点移动到下一个项目。
向上箭头
根据 orientation 将焦点移动到上一个项目。
向左箭头
根据 orientation 将焦点移动到上一个项目。
主页
将焦点移动到第一个项目。
结束
将焦点移动到最后一个项目。