Radix Vue

外观

单选按钮组 ​

一组可检查的按钮——称为单选按钮——一次只能选中一个按钮。
vue
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
import { ref } from 'vue'

const radioStateSingle = ref('default')
</script>

<template>
  <RadioGroupRoot
    v-model="radioStateSingle"
    class="flex flex-col gap-2.5"
    default-value="default"
    aria-label="View density"
  >
    <div class="flex items-center">
      <RadioGroupItem
        id="r1"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="default"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r1"
      >
        Default
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r2"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="comfortable"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r2"
      >
        Comfortable
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r3"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
        value="compact"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label
        class="text-white text-[15px] leading-none pl-[15px]"
        for="r3"
      >
        Compact
      </label>
    </div>
  </RadioGroupRoot>
</template>

特点 ​

  • 完整键盘导航。
  • 支持水平/垂直方向。
  • 可以是受控的或不受控的。

安装 ​

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入所有部分并将其组合在一起。

vue
<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
</script>

<template>
  <RadioGroupRoot>
    <RadioGroupItem>
      <RadioGroupIndicator />
    </RadioGroupItem>
  </RadioGroupRoot>
</template>

API 参考 ​

根 ​

包含单选按钮组的所有部分。

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

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

asChild
boolean

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

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

defaultValue
string

最初渲染时应检查的单选按钮项的值。

当您不需要控制单选按钮项的状态时使用。

dir
'ltr' | 'rtl'

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

disabled
false
boolean

当true时，阻止用户与单选按钮项交互。

loop
true
boolean

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

modelValue
string

要检查的单选按钮项的受控值。可以绑定为v-model。

name
string

组的名称。作为名称/值对的一部分，与拥有它的表单一起提交。

orientation
'vertical' | 'horizontal'

组件的方向。

required
false
boolean

当true时，表示用户必须在拥有表单提交之前检查单选按钮项。

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

当单选按钮组值更改时调用的事件处理程序

插槽（默认）有效载荷
modelValue
string | undefined

当前输入值

数据属性值
[data-disabled]禁用时出现

项目 ​

组中可以检查的项目。在form中使用时，也会渲染input，以确保事件正确传播。

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

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

asChild
boolean

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

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

disabled
false
boolean

当true时，阻止用户与单选按钮项交互。

id
string
name
string
required
boolean

当true时，表示用户必须在拥有表单提交之前检查单选按钮项。

value
string

与name一起提交时作为数据给出的值。

数据属性值
[data-state]"checked" | "unchecked"
[data-disabled]禁用时出现

指示器 ​

在单选按钮项处于选中状态时渲染。您可以直接设置此元素的样式，也可以将其用作包装器将图标放入其中，或两者兼而有之。

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

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

asChild
boolean

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

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

forceMount
boolean

用于在需要更多控制时强制装载。当使用 Vue 动画库控制动画时非常有用。

数据属性值
[data-state]"checked" | "unchecked"
[data-disabled]禁用时出现

无障碍 ​

遵循单选按钮组 WAI-ARIA 设计模式并使用roving tabindex 来管理单选按钮项之间的焦点移动。

键盘交互 ​

键描述
Tab
将焦点移动到已选中的单选按钮项或组中的第一个单选按钮项。
空格
当焦点位于未选中的单选按钮项上时，选中它。
箭头向下
移动焦点并选中组中的下一个单选按钮项。
箭头向右
移动焦点并选中组中的下一个单选按钮项。
箭头向上
移动焦点到组中的上一个单选按钮项。
箭头向左
移动焦点到组中的上一个单选按钮项。