开关 Switch

#基础用法

Dissolve overlaysShow hairlinesReduced motion

switch/basic.vue

<script setup lang="ts">
import { Switch } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-3 w-full">
    <Switch.Root default-checked>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Dissolve overlays</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Show hairlines</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Switch.Root default-checked disabled>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Reduced motion</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  </div>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	开关手柄的尺寸档位，轨道随之变化
`checked`	`boolean`		switch 的受控选中状态
`defaultChecked`	`boolean`		switch 渲染时的初始选中状态；不需要控制选中状态时使用
`disabled`	`boolean`		switch 是否禁用
`form`	`string`		switch 所属表单的 id
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>`		switch 各元素的 id，适合组合使用
`invalid`	`boolean`		为 `true` 时 switch 标记为无效
`label`	`string`		无障碍元素及其状态的本地化文案
`name`	`string`		switch 中 `input` 字段的 `name`，用于表单提交
`readOnly`	`boolean`		switch 是否只读
`required`	`boolean`		为 `true` 时 switch input 标记为必填
`value`	`string`	`"on"`	复选框 input 的值，用于表单提交

#Thumb

纯造型的部件——自身没有属性，沿用部件结构的共享样式。