开关

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

查看代码

飞行模式

特性

从命令行安装此组件。

$ npm add reka-ui

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

Vue

<script setup>
import { SwitchRoot, SwitchThumb } from 'reka-ui'
</script>

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

包含开关的所有部分。当在 form 中使用时，还会渲染一个 input 以确保事件正确传播。

属性	默认	类型
`as`	`'button'`	`AsTag \| 组件` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`defaultValue`		`布尔值` 开关初始渲染时的状态。在不需要控制其状态时使用。
`disabled`		`布尔值` 当为 `true` 时，阻止用户与开关交互。
`id`		`字符串`
`modelValue`		`布尔值 \| null` 开关的受控状态。可以绑定为 `v-model`。
`name`		`字符串` 字段的名称。随其所属的表单一起作为名称/值对提交。
`required`		`布尔值` 当为 `true` 时，表示用户必须在所属表单提交前设置值。
`value`	`'on'`	`字符串` 与 `name` 一起提交时作为数据给出的值。

事件触发	载荷
`update:modelValue`	`[载荷: 布尔值]` 当开关的值改变时调用的事件处理程序。

插槽（默认）	载荷
`modelValue`	`布尔值` 当前值

数据属性	值
`[data-state]`	`"选中" \| "未选中"`
`[data-disabled]`	禁用时存在

用于视觉指示开关是开还是关的滑块。

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

数据属性	值
`[data-state]`	`"选中" \| "未选中"`
`[data-disabled]`	禁用时存在

键	描述
`空格键`	切换组件的状态。
`回车键`	切换组件的状态。