Rating Demos

评分组件通常用于用户反馈场景。

代码演示 #

最简单的用法。

通过 size 属性可以控制评分组件的大小，支持三种尺寸 small, medium, large。默认尺寸为 medium 。

默认情况下评分组件只支持整数评分，通过开启 allowHalf 属性可以支持半星评分。

支持允许或者禁用清除。

设置 disabled 属性后，评分组件仅展示模式，不可选择。

组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍：给 Rating 传入一个id，就可以支持语音提示当前选择的评分。注意：如果一个页面上有多个 Rating，id 属性一定不能相同。

添加 showGrade 属性，使评分组件具有等级提示信息。

设置 isPreview 和 renderPreview 属性后，评分组件仅展示模式，渲染自定义内容。

参数	说明	类型	默认值
defaultValue	默认值	number	-
value	值（受控模式）	number	-
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
count	评分的总数	number	5
showGrade	是否显示 grade	boolean	false
allowHalf	是否允许半星评分	boolean	-
allowClear	是否允许再次点击后清除	boolean	false
onChange	用户点击评分时触发的回调	(value: number) => void	-
onHoverChange	用户 hover 评分时触发的回调	(value?: number) => void	-
disabled	是否禁用	boolean	false
isPreview	是否为预览态	boolean	false
renderPreview	预览态模式下渲染的内容（isPreview 时必传，否则预览不生效）签名: 参数: value: 评分值 props: 组件参数对象返回值: 预览模式下的渲染内容	(value: number, props: RatingProps) => React.ReactNode	-
readAs	评分文案生成方法，传入 id 支持无障碍时，读屏软件可读签名: 参数: val: 当前分值返回值: 该分值的渲染文案	(val: number) => React.ReactNode	-
type	-	string	-