contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 | |
| 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 |
| size | Star size | 'small' | 'middle' | 'large' | 'middle' | |
| style | The custom style object of rate | CSSProperties | - | |
| tooltips | Customize tooltip by each character | TooltipProps[] | 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) | - |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
| 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 | readonly string[] | Transform | readonly Transform[] | { _multi_value_?: boolean; _skip_check_?: boolean; value: readonly string[] | Transform | (readonly string[] | Transform | undefined)[] | undefined } | undefined | scale(1.1) |
| starSize | Star size | number | 20 |
| starSizeLG | Large star size | number | 25 |
| starSizeSM | Small star size | number | 15 |
The simplest usage.
Support select half star.
Read only, can't use mouse to interact.
Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
Three sizes.
Add copywriting in rate components.
Support set allow to clear star when click again.
Can customize each character using (RateProps) => ReactNode.
