Rate 评分 #

一个评分组件，表示用户对内容的兴趣

获取组件 #

演示 #

默认 #

尺寸 #

设置组件的大小

颜色 #

设置组件的颜色

允许半选 #

竖直方向 #

半选变为上下半选

辅助文字 #

禁用与只读 #

字符 #

您可以使用其他 icon、emoji、数字、中文或是其他自定义的图案

自定义渲染 #

当有多级评价时，您可以自定义每级展现的 character，不过这需要您自己实现

无障碍设计 #

WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating

Props #

| 属性名称 | 类型 (默认值) | 描述 | | --------------- | ------------------------------------------------- | -------------------------------- | --- | | allowHalf | boolean | 是否支持半选 | | character | ReactNode | 自定义字符 | | cleanable | boolean(true) | 是否支持清除 | | defaultValue | number(0) | 默认值 | | disabled | boolean | 是否禁用，为 true 时无法进行交互 | | | max | number(5) | 最大分数 | | renderCharacter | (value: number,index: number) => ReactNode | 自定义渲染 character 函数 | | readOnly | boolean | 是否只读，为 true 时无法进行交互 | | size | 'lg' | 'md' | 'sm' | 'xs' ('md') | 设置组件尺寸 | | color | Color | 设置颜色 | | value | number | 设置值 受控 | | vertical | boolean | 是否竖直方向上半选 | | onChange | (value: number, event) => void | value 发生改变时的回调函数 | | onChangeActive | (value: number, event) => void | 悬停状态更改时触发的回调函数。 |

ts:Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';