# 评分 Rate

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/rate
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用图形表示评分等级程度。

## 安装

```bash
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)` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt