uiUI 组件系统
对比

评分输入

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""
value4
max5
disabledfalse

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 每档有可理解的文字或数值含义。
  • 键盘能选择,图标不应成为唯一信号。

和相似组件的区别

Rating 收集有序评价;Toggle Group 选择工具或类别。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusRate
官方提供

评分输入与只读显示。

官方提供

Svelte 的评分交互部件。

关键状态

未评分已评分只读禁用

Vue / Nuxt、Svelte / SvelteKit · 来源核验

一起了解

单选框组 ↗分段选择与工具切换 ↗表单与字段 ↗