mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 10:28:06 +08:00
2f8fa45df3
* docs: update rootClassName description * docs: update rootClassName description * docs: update docs
63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
---
|
||
category: Components
|
||
group: Data Entry
|
||
title: Rate
|
||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original
|
||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original
|
||
demo:
|
||
cols: 2
|
||
---
|
||
|
||
Rate component.
|
||
|
||
## When To Use
|
||
|
||
- Show evaluation.
|
||
- A quick rating operation on something.
|
||
|
||
## Examples
|
||
|
||
<!-- prettier-ignore -->
|
||
<code src="./demo/basic.tsx">Basic</code>
|
||
<code src="./demo/half.tsx">Half star</code>
|
||
<code src="./demo/text.tsx">Show copywriting</code>
|
||
<code src="./demo/disabled.tsx">Read only</code>
|
||
<code src="./demo/clear.tsx">Clear star</code>
|
||
<code src="./demo/character.tsx">Other Character</code>
|
||
<code src="./demo/character-function.tsx">Customize character</code>
|
||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||
|
||
## API
|
||
|
||
Common props ref：[Common props](/docs/react/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 | |
|
||
| 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
|
||
|
||
<ComponentTokenTable component="Rate"></ComponentTokenTable>
|