Rating 评分
让用户打一个星级,或者只读地展示一个评分。只支持整星;要展示 4.6 这样的均分,请在旁边写出数字。
基本用法
点第几颗就是几星;再点一次当前的星可以清零(allowClear 默认开启)。
尺寸与星数
状态
readOnly 用来展示别人打的分:它不可聚焦,是一张带名称的图。disabled 是暂时不能操作的输入。
受控用法
value 为 0 表示未评分。
不错
API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | — | 当前星数(受控),0 表示未评分。 |
defaultValue | number | 0 | 初始星数(非受控)。 |
onChange | (value: number) => void | — | 星数变化时触发。 |
max | number | 5 | 总星数。 |
allowClear | boolean | true | 再点一次当前的星可以清零。 |
readOnly | boolean | — | 只读:只展示,不可操作。 |
disabled | boolean | — | 禁用。 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸。 |
starLabel | (n: number) => string | n => `${n} 星` | 每颗星的可读名称。 |
name | string | — | 表单字段名:多渲染一个隐藏 input。 |
无障碍
- 可操作时是
role="radiogroup",每颗星是role="radio",名称是“n 星”。整组一个 Tab 停靠点。 - → ↑ 加一星,← ↓ 减一星(到头循环);Home / End 到一星 / 满星;Space / Enter 在当前星上再按一次可清零。
- 只读时是
role="img",名称形如“用户评分:4 / 5”,不进入 Tab 顺序。 - 名称取 Field 的标签或
aria-label,都没有时默认叫“评分”。 - 星的填充靠实心 / 空心区分,不只靠颜色。