Switch 开关
基于 reka-ui 的 Switch 原语构建的新粗野主义风格机械切换开关，采用 3D 立体键帽、冲压导轨凹槽与工控通断刻印，支持 v-model。
预览
基础 3D 机械滑块
工控通断铭牌刻印 (showLabels) & 吸合音效
机械形态 (shape="rocker")
尺寸矩阵 (sm / default / lg)
安装
pnpm dlx brutx-vue@latest add switch用法
<script setup>
import { ref } from 'vue'
import { Switch, Label } from 'brutx-ui-vue'
const enabled = ref(false)
</script>
<template>
<div class="flex items-center gap-3">
<Switch v-model="enabled" />
<Label>飞行模式</Label>
</div>
</template>工控铭牌刻印 (I / O Marks)
开启 showLabels 可在导轨内呈现高对比度等宽工控通断刻印（I / O），纯视觉呈现且带 aria-hidden，对屏幕阅读器零噪音。
<script setup>
import { ref } from 'vue'
import { Switch, Label } from 'brutx-ui-vue'
const power = ref(true)
</script>
<template>
<div class="flex items-center gap-3">
<Switch v-model="power" show-labels />
<Label>设备主电源</Label>
</div>
</template>机械形态 (Shape)
支持标准机械滑块 slider 与工控翘板 rocker 形态，与颜色主题 variant 正交解耦。
<script setup>
import { ref } from 'vue'
import { Switch } from 'brutx-ui-vue'
const val1 = ref(false)
const val2 = ref(true)
</script>
<template>
<div class="flex items-center gap-4">
<Switch v-model="val1" shape="slider" variant="primary" />
<Switch v-model="val2" shape="rocker" variant="accent" show-labels />
</div>
</template>禁用状态
<template>
<Switch disabled />
</template>自定义无障碍标签
Switch 默认通过 locale 提供 aria-label（中文为"开关"），确保屏幕阅读器能够正确朗读。当需要更具体的描述时，可通过 ariaLabel prop 自定义。未提供时回退到 t('switch.toggle')。
<script setup>
import { ref } from 'vue'
import { Switch, Label } from 'brutx-ui-vue'
const sync = ref(false)
</script>
<template>
<div class="flex items-center gap-3">
<Switch v-model="sync" aria-label="自动同步数据" />
<Label>自动同步</Label>
</div>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | undefined | 追加到 Switch 原语根元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
modelValue可空 | boolean | null | undefined | undefined | 受控开关状态，通过 v-model 绑定；传入 null 时按关闭状态处理。 |
详情声明类型boolean | null | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
defaultValue | boolean | undefined | undefined | 未传入 modelValue 时使用的初始状态；同时传入 defaultChecked 时以 defaultValue 为准。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
defaultChecked | boolean | undefined | undefined | 非受控模式下的初始状态别名；同时提供 defaultValue 时被其覆盖。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
disabled | boolean | undefined | false | 禁用开关交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
variant | "accent" | "danger" | "default" | "primary" | "secondary" | undefined | "default" | 设置开关的颜色和状态样式变体。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "danger" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
shape | "rocker" | "slider" | undefined | "slider" | 设置滑块的机械外观为常规滑动式或摇杆式。 |
详情声明类型NonNullable<"slider" | "rocker" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置开关轨道和滑块的尺寸。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
showLabels | boolean | undefined | false | 在轨道内显示表示关闭和开启的 O/I 铭牌；标签仅为装饰并从无障碍树中隐藏。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
ariaLabel | string | undefined | undefined | 设置开关的无障碍名称；未提供时使用当前语言的默认文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
sound | boolean | undefined | false | 显式启用切换状态时的继电器音效；默认不播放。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/switch/Switch.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: boolean] | 用户切换状态后发出新的布尔值，用于同步 v-model。 |
详情声明类型[value: boolean] 字面量
来源packages/ui/src/components/switch/Switch.vue | ||
可访问性
- 键盘操作：支持
Space/Enter切换开关状态 - ARIA 属性：自动管理
role="switch"、aria-checked；默认通过 locale 提供aria-label - 焦点管理：可通过 Tab 键聚焦，使用
--brutal-ring令牌显示可见聚焦环 - 铭牌隔离：
showLabels工控刻印打上aria-hidden="true"，不干扰屏幕阅读器