切换

一个有两种状态的按钮，可以是开启或关闭。

查看代码

特性

从命令行安装此组件。

$ npm add reka-ui

导入组件。

vue

<script setup>
import { Toggle } from 'reka-ui'
</script>

<template>
  <Toggle />
</template>

切换组件。

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

事件触发	载荷
`update:modelValue`	`[value: boolean]` 当切换组件的值改变时调用的事件处理程序。

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

键	描述
`空格键`	激活/取消激活切换组件。
`回车键`	激活/取消激活切换组件。