跳到主要内容

Rating 评分

让用户打一个星级,或者只读地展示一个评分。只支持整星;要展示 4.6 这样的均分,请在旁边写出数字。

基本用法

点第几颗就是几星;再点一次当前的星可以清零(allowClear 默认开启)。

尺寸与星数

状态

readOnly 用来展示别人打的分:它不可聚焦,是一张带名称的图。disabled 是暂时不能操作的输入。

受控用法

value 为 0 表示未评分。

不错

API

属性

属性类型默认值说明
valuenumber—当前星数(受控),0 表示未评分。
defaultValuenumber0初始星数(非受控)。
onChange(value: number) => void—星数变化时触发。
maxnumber5总星数。
allowClearbooleantrue再点一次当前的星可以清零。
readOnlyboolean—只读:只展示,不可操作。
disabledboolean—禁用。
size'sm' | 'md' | 'lg''md'尺寸。
starLabel(n: number) => stringn => `${n} 星`每颗星的可读名称。
namestring—表单字段名:多渲染一个隐藏 input。

无障碍

  • 可操作时是 role="radiogroup",每颗星是 role="radio",名称是“n 星”。整组一个 Tab 停靠点。
  • → ↑ 加一星,← ↓ 减一星(到头循环);Home / End 到一星 / 满星;Space / Enter 在当前星上再按一次可清零。
  • 只读时是 role="img",名称形如“用户评分:4 / 5”,不进入 Tab 顺序。
  • 名称取 Field 的标签或 aria-label,都没有时默认叫“评分”。
  • 星的填充靠实心 / 空心区分,不只靠颜色。