评分输入
Rating / Rating Group
把有限评分尺度呈现为可读、可选择的值。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'rating'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
评价、满意度或已有评分展示。
什么时候不用
细致的反馈原因仍需文本,评分不能代替解释。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "这份说明有多清楚?" |
name | "" |
value | 4 |
max | 5 |
disabled | false |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 每档有可理解的文字或数值含义。
- 键盘能选择,图标不应成为唯一信号。
和相似组件的区别
Rating 收集有序评价;Toggle Group 选择工具或类别。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt、Svelte / SvelteKit · 来源核验