Rate 评分

选择或展示评分。

选择评分

当前评分: 3.5

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

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

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`	需要非零评分

类型

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

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

使用说明

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

#Rate 评分

#选择评分

#按分数变色

#只读与禁用

#Rate API

#类型