Switch 开关

允许用户在选中与未选中之间切换的控件。

基础用法

@Local airplane: boolean = false;

SSwitch({ label: 'Airplane Mode', checked: this.airplane!! })
SSwitch({ label: 'Wi-Fi', defaultChecked: true })
SSwitch({ label: 'Disabled', disabled: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸与卡片

由卡片式开关组成的设置列表。

SSwitch({ label: 'Small', sizing: 'sm', defaultChecked: true })
SSwitch({ label: 'Large', sizing: 'lg', defaultChecked: true })
SSwitch({ label: 'Marketing emails', description: 'Receive emails about new products and features.',
  card: true })
SSwitch({ label: 'Security emails', description: 'Receive emails about your account security.',
  card: true, defaultChecked: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SSwitch

shadcn-vue 的 Switch：h-[1.15rem] w-8 rounded-full border border-transparent shadow-xs，关闭时为 bg-input dark:bg-input/80，开启时为 bg-primary；size-4 的滑块通过 translate-x-[calc(100%-2px)] 滑动。

变体：sizing 取 sm | default | lg，description（标签下方的弱化文字），以及 card（标签与描述位于带边框、可按下的卡片中，开关位于右侧；开启时高亮）。

请通过 onCheckedChange / !! 响应变化（控件自身的点击会接管 SSwitch 上的 .onClick()）。

属性	类型	默认值	说明
checked!!	boolean | undefined	undefined	受控状态（配合 !! 使用）。留空则为非受控。
defaultChecked	boolean	false
disabled	boolean	false
label	ResourceStr | undefined	undefined	显示在右侧的文字；同样可点击。
description	ResourceStr | undefined	undefined	标签下方弱化的辅助文字。
sizing	ChoiceSize ChoiceSize = 'sm' | 'default' | 'lg'	'default'
card	boolean	false	带边框的选择卡片：文字位于左侧，开关位于右侧。
tokens	SwitchTokens	{}	实例级令牌覆盖（实例 → 主题 --switch-* → 配方），参见 {@link SwitchTokens}。

事件	类型	默认值	说明
onCheckedChange	(v: boolean) => void	() => { }