单选框组
Radio Group
让用户从互斥选项中选择一个值。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'radio'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
选项不多,且需要同时看到差异。
什么时候不用
选项很多时考虑 Select;可独立勾选用 Checkbox。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "默认展示方式" |
name | "" |
options | [{"value":"grid","label":"网格视图"},{"value":"list","label":"列表视图"}] |
value | "grid" |
disabled | false |
multiple | false |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 组标题说明选择问题。
- 同组使用一致 name,并保留方向键行为。
和相似组件的区别
Radio 选一个持久值;按钮组也可能表示即时动作。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验