Switch - 开关

Demo

Last Changed

7 minutes ago

switch/demo.vue

brand 实色

aurora 极光

small

disabled

当前：brand = true · aurora = true

<script setup lang="ts">
import { ref } from 'vue'

const brand = ref(true)
const aurora = ref(true)
const small = ref(false)
</script>

<template>
  <div class="flex flex-col gap-5">
    <div class="flex flex-wrap items-center gap-6">
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="brand" />
        <span class="text-sm">brand 实色</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="aurora" variant="aurora" />
        <span class="text-sm">aurora 极光</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="small" size="sm" />
        <span class="text-sm">small</span>
      </div>
      <div class="flex items-center gap-2 op-60">
        <YlfSwitch :model-value="true" disabled />
        <span class="text-sm">disabled</span>
      </div>
    </div>
    <p class="text-sm op-70">
      当前：brand = {{ brand }} · aurora = {{ aurora }}
    </p>
  </div>
</template>

开关：行为与可访问性基于 reka-ui（role="switch"、键盘 Space / Enter、焦点管理），外观走「极光 / 多巴胺」token —— reka 管行为，我们管皮肤。

Props

属性	说明	类型	默认值
v-model	开关状态	boolean	false
variant	on 态轨道	brand | aurora	brand
size	尺寸	sm | md	md
disabled	禁用	boolean	false