Rate 评分 #

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

获取组件 #

import { Rate } from 'rsuite';

//or
import Rate from 'rsuite/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	enum: 'lg', 'md', 'sm', 'xs' ('md')	设置组件尺寸
color	enum: 'red', 'orange','yellow', 'green', 'cyan', 'blue', 'violet'	设置颜色
value	number	设置值 受控
vertical	boolean	是否竖直方向上半选
onChange	(value: number, event) => void	value 发生改变时的回调函数
onChangeActive	(value: number, event) => void	悬停状态更改时触发的回调函数。