Rate
Rate
Used for rating operation on something.
Importimport{ Rate }from"antd"; |
Sourcecomponents/rate |
When To Use
- Show evaluation.
- A quick rating operation on something.
Examples
The simplest usage.
Add copywriting in rate components.
Support set allow to clear star when click again.
- 11
- 22
- 33
- 44
- 55
Can customize each character using (RateProps) => ReactNode.
Support select half star.
Read only, can't use mouse to interact.
- AA
- AA
- AA
- AA
- AA
- 好好
- 好好
- 好好
- 好好
- 好好
Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
API
Common props ref：Common props
| Property | Description | type | Default | Version |
|---|---|---|---|---|
| allowClear | Whether to allow clear when click again | boolean | true | |
| allowHalf | Whether to allow semi selection | boolean | false | |
| autoFocus | If get focus when component mounted | boolean | false | |
| character | The custom character of rate | ReactNode | (RateProps) => ReactNode | <StarFilled /> | function(): 4.4.0 |
| className | The custom class name of rate | string | - | |
| count | Star count | number | 5 | |
| defaultValue | The default value | number | 0 | |
| disabled | If read only, unable to interact | boolean | false | |
| keyboard | Support keyboard operation | boolean | true | 5.18.0 |
| style | The custom style object of rate | CSSProperties | - | |
| tooltips | Customize tooltip by each character | string[] | - | |
| value | The current value | number | - | |
| onBlur | Callback when component lose focus | function() | - | |
| onChange | Callback when select value | function(value: number) | - | |
| onFocus | Callback when component get focus | function() | - | |
| onHoverChange | Callback when hover item | function(value: number) | - | |
| onKeyDown | Callback when keydown on component | function(event) | - |
Methods
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| starBg | Star background color | string | rgba(0,0,0,0.06) |
| starColor | Star color | string | #fadb14 |
| starHoverScale | Scale of star when hover | undefined | readonly string[] | Transform | readonly Transform[] | { _multi_value_?: boolean; _skip_check_?: boolean; value: readonly string[] | Transform | (readonly string[] | Transform | undefined)[] | undefined } | scale(1.1) |
| starSize | Star size | number | 20 |