Radix Vue

外观

切换 ​

一个可以处于打开或关闭状态的双状态按钮。
vue
<script setup lang="ts">
import { Toggle } from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const toggleState = ref(false)
</script>

<template>
  <Toggle
    v-model:pressed="toggleState"
    aria-label="Toggle italic"
    class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
  >
    <Icon
      icon="radix-icons:font-italic"
      class="w-[15px] h-[15px]"
    />
  </Toggle>
</template>

特点 ​

  • 完整的键盘导航。
  • 可以是受控或不受控的。

安装 ​

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入组件。

vue
<script setup>
import { Toggle } from 'radix-vue'
</script>

<template>
  <Toggle />
</template>

API 参考 ​

根 ​

切换。

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

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

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。

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

defaultValue
布尔值

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

disabled
false
布尔值

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

pressed
布尔值

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

发射有效载荷
update:pressed
[value: 布尔值]

切换的按下状态发生变化时调用的事件处理程序。

插槽 (默认)有效载荷
pressed
布尔值

当前按下状态

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

无障碍性 ​

键盘交互 ​

钥匙描述
空间
激活/停用切换。
进入
激活/停用切换。