> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/rate.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Rate 评分

选择或展示评分。

## 选择评分


当前评分: 3.5

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/rate/basic.tsx"
import { Rate, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function RateBasic() {
  const [value, setValue] = useState(3.5);
  return (
    <Space direction="vertical" align="stretch">
      <Rate aria-label="项目评分" value={value} onChange={setValue} allowHalf />
      <output>
        <Text tone="muted">当前评分: {value}</Text>
      </output>
    </Space>
  );
}
```

展开代码

## 按分数变色


低分珊瑚红，中等琥珀橙，高分星光黄。当前评分: 2

自定义品牌颜色

colors.tsx

复制代码

```tsx lineNumbers file="../../src/examples/rate/colors.tsx"
import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function RateColors() {
  const [value, setValue] = useState(2);
  return (
    <Space direction="vertical" align="stretch">
      <Rate aria-label="按分数变色" value={value} onChange={setValue} colorByValue />
      <output>
        <Text tone="muted">低分珊瑚红，中等琥珀橙，高分星光黄。当前评分: {value}</Text>
      </output>
      <Flex direction="column" gap="sm">
        <Text>自定义品牌颜色</Text>
        <Rate defaultValue={4} readOnly color="#7654c6" />
      </Flex>
    </Space>
  );
}
```

展开代码

## 只读与禁用


只读评分

禁用评分

states.tsx

复制代码

```tsx lineNumbers file="../../src/examples/rate/states.tsx"
import { Flex, Rate, Space, Text } from '@ifhover/leaf-ui';

export function RateStates() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>只读评分</Text>
        <Rate defaultValue={4} readOnly />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>禁用评分</Text>
        <Rate defaultValue={2} disabled size="sm" />
      </Flex>
    </Space>
  );
}
```

展开代码

## Rate API

| 属性                       | 类型                                  | 默认值            | 说明                        |
| ------------------------ | ----------------------------------- | -------------- | ------------------------- |
| `value / defaultValue`   | `number`                            | `0`            | 受控 / 初始评分                 |
| `onChange`               | `(value: number) => void`           | —              | 评分变化                      |
| `count`                  | `number`                            | `5`            | 星星数量，最多 20                |
| `allowHalf / allowClear` | `boolean`                           | `false / true` | 半星 / 重复点击清除               |
| `readOnly / disabled`    | `boolean`                           | `false`        | 只读 / 禁用                   |
| `size`                   | `'sm' \| 'md' \| 'lg'`              | `'md'`         | 星星尺寸                      |
| `color`                  | `string`                            | `'#ffc53d'`    | 固定星星颜色；优先于按分数变色           |
| `colorByValue`           | `boolean`                           | `false`        | 按分数比例使用低、中、高档颜色           |
| `colors`                 | `readonly [string, string, string]` | —              | 低、中、高档颜色；阈值为总分的 40% 和 70% |
| `name / form`            | `string`                            | —              | 字段名 / 关联表单                |
| `required`               | `boolean`                           | `false`        | 需要非零评分                    |

## 类型

可导入以下类型定义属性、组装数据或处理回调。

```ts
import type { RateProps } from '@ifhover/leaf-ui';
```

## 使用说明

悬停可预览评分和颜色，离开恢复已选值。方向键调整评分，Home / End 跳至首尾，Delete / Backspace 可清除。只读保留展示，禁用也会阻止交互。支持 FormData 和非受控表单 reset。