开关
Switch
控制一个立即生效的二元设置。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'switch'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
开启或关闭提醒、显示选项等持续状态。
什么时候不用
需要点击提交后才生效时，Checkbox 往往更清楚。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "显示英文名称" |
name | "sample-english" |
value | true |
help | "可随时切换的独立设置" |
disabled | false |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 标签描述设置本身，状态另行表达。
- 失败时恢复真实值并说明原因。
和相似组件的区别
Switch 表达设置状态；Button 表达一次动作。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验