Rate
Rate
Importimport { Rate } from 'antd'; |
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | × |
| 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' | 'medium' | 'large' | 'medium' | × | |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidth | Border width of base components | number | 1 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |