评分 Rate
用图形表示评分等级程度。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库,不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot,否则 Toast、Dialog 等命令式 API 无法渲染;深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库(MIT),固定在 npm 5.43.0 对应的提交;示例中的 DemoBlock 等展示辅助组件由 JGuang 重写,不属于 antd-mobile 的 API。
用图形表示评分等级程度。
何时使用
适用于展示事物评级以及快速打分。
示例
Rate
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| allowClear | 是否允许再次点击后清除 | boolean | true |
| allowHalf | 是否允许半选 | boolean | false |
| character | 自定义字符 | ReactNode | 默认的星形 |
| count | star 总数 | number | 5 |
| defaultValue | 默认值 | number | 0 |
| onChange | 选择时的回调 | (value: number) => void | - |
| readOnly | 只读,无法进行交互 | boolean | false |
| value | 当前数,受控值 | number | - |
CSS 变量
| 属性 | 说明 | 默认值 |
|---|---|---|
| --active-color | 填充色 | var(--adm-color-yellow) |
| --star-size | star 大小 | 24px |
| --inactive-color | 原始填充色 | var(--adm-color-border) |
| --inactive-color-half | 原始填充色(半选模式 - 左半侧) | var(--adm-color-border) |