Rate
Graphical representation of the degree of rating scale.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Graphical representation of the degree of rating scale.
When to Use
Useful for showing things ratings and quick scoring.
Demos
Rate
Props
| Name | Description | Type | Default |
|---|---|---|---|
| allowClear | Whether to allow clearing after another click. | boolean | true |
| allowHalf | Whether to allow the selection of half. | boolean | false |
| character | Custom character. | ReactNode | The default star shape. |
| count | Total number of stars. | number | 5 |
| defaultValue | The default value of rate. | number | 0 |
| onChange | Callback when select. | (value: number) => void | - |
| readOnly | The component is uninteractable when true. | boolean | false |
| value | The value of rate. | number | - |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --active-color | Fill color when active. | var(--adm-color-yellow) |
| --star-size | Star size. | 24px |
| --inactive-color | Fill color when inactive. | var(--adm-color-border) |
| --inactive-color-half | Fill color when inactive(half-selected mode - left half). | var(--adm-color-border) |