Radix Vue

外观

切换组 ​

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

vue
<script setup lang="ts">
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const toggleStateSingle = ref('left')
const toggleStateMultiple = ref(['italic'])

const toggleGroupItemClasses
  = 'hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 flex h-[35px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none'
</script>

<template>
  <div>
    <ToggleGroupRoot
      v-model="toggleStateSingle"
      type="single"
      class="flex"
    >
      <ToggleGroupItem
        value="left"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-left"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="center"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-center"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="right"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:text-align-right"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
    </ToggleGroupRoot>
    <br>
    <ToggleGroupRoot
      v-model="toggleStateMultiple"
      type="multiple"
      class="flex"
    >
      <ToggleGroupItem
        value="bold"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:font-bold"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="italic"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:font-italic"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="strikethrough"
        aria-label="Toggle italic"
        :class="toggleGroupItemClasses"
      >
        <Icon
          icon="radix-icons:strikethrough"
          class="w-[15px] h-[15px]"
        />
      </ToggleGroupItem>
    </ToggleGroupRoot>
  </div>
</template>

特性 ​

  • 完整的键盘导航。
  • 支持水平/垂直方向。
  • 支持单个和多个按下按钮。
  • 可以是受控或不受控的。

安装 ​

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入组件。

vue
<script setup>
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
</script>

<template>
  <ToggleGroupRoot>
    <ToggleGroupItem />
  </ToggleGroupRoot>
</template>

API 参考 ​

根 ​

包含切换组的所有部分。

属性默认值类型
as
'div'
AsTag | 组件

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

asChild
布尔值

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

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

defaultValue
字符串 | 字符串[]

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

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

dir
'ltr' | 'rtl'

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

disabled
false
布尔值

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

loop
true
布尔值

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

modelValue
字符串 | 字符串[]

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

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

orientation
'vertical' | 'horizontal'

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

rovingFocus
true
布尔值

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

type
'single' | 'multiple'

确定一次可以按下“单个”还是“多个”项目。

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

发射有效载荷
update:modelValue
[payload: string | string[]]

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

插槽（默认）有效载荷
modelValue
字符串 | 字符串[] | 未定义

当前切换值

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

项目 ​

组中的一个项目。

属性默认值类型
as
'button'
AsTag | 组件

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

asChild
布尔值

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

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

defaultValue
布尔值

切换在初始渲染时按下的状态。 当您不需要控制它的打开状态时使用。

disabled
布尔值

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

pressed
布尔值

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

value*
字符串

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

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

示例 ​

确保始终存在一个 value ​

您可以控制组件以确保 value。

vue
<script setup>
import { ref } from 'vue'
import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'

const value = ref('left')
</script>

<template>
  <ToggleGroupRoot
    :model-value="value"
    @update:model-value="(val) => {
      if (val) value = val
    }"
  >
    <ToggleGroupItem value="left">
      <TextAlignLeftIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="center">
      <TextAlignCenterIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="right">
      <TextAlignRightIcon />
    </ToggleGroupItem>
  </ToggleGroupRoot>
</template>

无障碍性 ​

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

键盘交互 ​

键描述
Tab
将焦点移动到按下的项目或组中的第一个项目。
空格
激活/停用项目。
Enter
激活/停用项目。
ArrowDown
将焦点移动到组中的下一个项目。
ArrowRight
将焦点移动到组中的下一个项目。
ArrowUp
将焦点移动到组中的上一个项目。
ArrowLeft
将焦点移动到组中的上一个项目。
Home
将焦点移动到第一个项目。
End
将焦点移动到最后一个项目。