Skip to content

Switch

开关运行时:Root 持有 checked,并支持 loading/disabled;Thumb 只消费上下文。

运行时

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives@varo-ui/weapp/primitives

演示

安装包@varo-ui/headless

安装

bash
pnpm add @varo-ui/headless @varo-ui/h5
# 或
pnpm add @varo-ui/headless @varo-ui/weapp

基础用法

通过上方演示面板切换 H5 实时预览,以及小程序运行时契约/代码。

Loading

loadingdisabled 都会关闭交互;loading 更适合异步提交中的短暂锁定。

Parts

Part作用
SwitchRoot状态与切换
SwitchThumb滑块 part

Props

Prop类型默认值描述
checkedboolean | undefinedundefined受控开关态
defaultCheckedbooleanfalse非受控初始态
disabledbooleanfalse禁用
loadingbooleanfalse加载中,不可切换
asstring'button'根节点标签

Events

EventPayload描述
update:checkedboolean受控同步
checkedChangeboolean状态变化

无障碍

  • Root 默认 button 语义。
  • loading/disabled 时不可切换。

平台说明

  • 双端共享 checked/loading 契约。
  • 视觉轨道与动画由 UI wrapper 负责。

相关文档