切换

允许用户在选中和未选中之间切换的控件。

飞行模式

<script setup lang="ts">
import { SwitchRoot, SwitchThumb } from 'radix-vue'
import { ref } from 'vue'

const switchState = ref(false)
</script>

<template>
  <div class="flex gap-2 items-center">
    <label
      class="text-white text-[15px] leading-none pr-[15px] select-none"
      for="airplane-mode"
    >
      Airplane mode
    </label>
    <SwitchRoot
      id="airplane-mode"
      v-model:checked="switchState"
      class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
    >
      <SwitchThumb
        class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
      />
    </SwitchRoot>
  </div>
</template>

功能

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

安装

从命令行安装组件。

$ npm add radix-vue

结构

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

<script setup>
import { SwitchRoot, SwitchThumb } from 'radix-vue'
</script>

<template>
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
</template>

API 参考

根

包含切换的所有部分。当在 form 中使用时，input 也会渲染，以确保事件正确传播。

道具	默认值	类型
as	'button'	AsTag | 组件 此组件应渲染为的元素或组件。可以被 asChild 覆盖
asChild		布尔值 更改为子元素传递的默认渲染元素，合并其属性和行为。 阅读我们的 组合 指南以了解更多详情。
checked		布尔值 切换的受控状态。可以绑定为 v-model:checked。
defaultChecked		布尔值 切换在最初渲染时的状态。如果您不需要控制其状态，请使用它。
disabled		布尔值 当 true 时，阻止用户与切换交互。
id		字符串
name		字符串 切换的名称。作为名称/值对的一部分，与其所属的表单一起提交。
required		布尔值 当 true 时，表示用户必须在提交所属表单之前选中切换。
value	'on'	字符串 使用 name 提交时作为数据提供的值。

发射	有效负载
update:checked	[有效负载：布尔值] 切换的选中状态更改时调用的事件处理程序。

插槽 (默认)	有效负载
checked	布尔值 当前选中状态

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

拇指

用于直观指示切换是否打开的拇指。

道具	默认值	类型
as	'span'	AsTag | 组件 此组件应渲染为的元素或组件。可以被 asChild 覆盖
asChild		布尔值 更改为子元素传递的默认渲染元素，合并其属性和行为。 阅读我们的 组合 指南以了解更多详情。

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

无障碍

符合 switch 角色要求。

键盘交互

键	描述
空格	切换组件的状态。
Enter	切换组件的状态。