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 | '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';
Vercel banner