评分 Rate

评分组件用于对事物进行评级操作，或展示事物的评级。

何时使用

• 需要对事物进行评级时
• 展示事物的平均评分时
• 收集用户反馈时

示例

基础用法

最简单的评分组件使用方式。

展示模式

在展示模式下，评分组件仅用于显示评分，不支持用户交互。

展示模式示例

展示不同评分值的效果。

带小数的展示模式

展示带有小数的评分值。

设置模式

在设置模式下，用户可以点击星星来设置评分。

整星设置模式

只允许选择整星的评分组件。

半星设置模式

允许选择半星的评分组件。

非受控模式

使用 defaultValue 属性设置默认值的非受控模式。

禁用状态

通过 disabled 属性禁用评分组件。

不同星星数量

通过 count 属性设置星星的总数。

交互式示例

完整的交互式评分组件示例。

API

Rate Props

参数	说明	类型	默认值
value	当前值（受控模式）	number	-
defaultValue	默认值（非受控模式）	number	0
count	星星总数	number	5
allowControl	是否允许交互（设置模式）	boolean	false
allowHalf	是否允许半星（仅设置模式有效）	boolean	false
disabled	是否禁用	boolean	false
showValue	是否显示数值	boolean	false
onChange	值改变时的回调	(value: number) => void	-
className	自定义类名	string	-

注意事项

1. 在展示模式下（allowControl=false），评分组件仅用于显示评分，不支持用户交互
2. 在设置模式下（allowControl=true），用户可以点击星星来设置评分
3. 通过 allowHalf 属性可以控制是否允许选择半星
4. 通过 count 属性可以设置星星的总数
5. 在受控模式下，需要同时提供 value 和 onChange 属性
6. 在非受控模式下，可以使用 defaultValue 设置默认值
7. 通过 showValue 属性可以显示当前评分值
8. 评分组件会根据主题自动适配颜色，在暗色模式下会有不同的视觉效果
9. 当鼠标悬停在星星上时，会预览即将设置的评分值