Lzh on GitHub

Toggle

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

const toggleState = ref(false)
</script>

<template>
  <Toggle
    v-model="toggleState"
    aria-label="Toggle italic"
    class="hover:bg-stone-50 text-stone-700 data-[state=on]:bg-stone-100 shadow-sm flex h-[35px] w-[35px] items-center justify-center rounded-lg border bg-white text-base leading-4 focus-within:outline-none focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
  >
    <Icon
      icon="radix-icons:font-italic"
      class="w-[15px] h-[15px]"
    />
  </Toggle>
</template>

以下是您提供的文本的简体中文翻译：

特性 (Features)

  • 完整的键盘导航。
  • 可控或非控。

安装 (Installation)

从命令行安装组件。

$ npm add reka-ui

解剖 (Anatomy)

导入组件。

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

<template>
  <Toggle />
</template>

API 参考 (API Reference)

根 (Root)

切换开关。

属性默认值类型描述
as'button'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
defaultValueboolean切换开关初始渲染时的按下状态。当您不需要控制其打开状态时使用。
disabledfalseboolean当 true 时，阻止用户与切换开关交互。
modelValueboolean | null切换开关的受控按下状态。可以通过 v-model 绑定。
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
requiredboolean当 true 时，表示用户必须在提交所属表单之前设置值。

发送事件

事件Payload描述
update:modelValue[value: boolean]切换开关值更改时调用的事件处理程序。

默认插槽

插槽参数插槽参数类型描述
modelValueboolean当前值
state'on' | 'off'当前状态
pressedboolean当前按下状态
disabledboolean当前禁用状态

数据属性 (Data Attributes)

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

可访问性 (Accessibility)

键盘交互 (Keyboard Interactions)

按键描述
Space激活/禁用切换开关。
Enter激活/禁用切换开关。