组件/Switch 开关
自 1.0.0BETA

Switch 开关

轻触反馈与状态切换

该页面由 AI 迁移生成,请谨慎使用

内容已迁移完成,但仍建议结合源码和人工评审结果使用。

Switch 开关

轻触反馈 + 明确状态色,适合密集设置页。
状态:Beta

基础用法

EXAMPLE.VUE
<template>
  <TuffSwitch v-model="enabled" />
  <TuffSwitch v-model="enabled" size="small" />
</template>

Demo

Toggle State

移动与颜色同步变化。

示例即将加载...
<template>
  <TuffSwitch :model-value="false" />
  <TuffSwitch :model-value="true" />
</template>

状态

属性名类型默认值说明
disabled--禁用态
loading--加载态
sizesmallmediumlarge-尺寸规格

API(简版)

属性名类型默认值说明
modelValue开关值
sizesmallmediumlarge尺寸
disabled禁用状态

Design Notes

  • 开关位移与颜色变化必须同步。
  • 小尺寸用于列表,大尺寸用于设置页。

组合示例

设置项

开关搭配标签用于设置列表。

示例即将加载...
<template>
  <TxTag>通知</TxTag>
  <TuffSwitch :model-value="true" />
</template>