Rating
rating评分 · 零依赖受控星级(radio 语义) + 自定义图标 + hover 预览 + token 星色
用法
基础用法
非受控默认 3 星，点击/悬停可改分；受控时用 value + onValueChange。
tsx
<Rating defaultValue={3} onValueChange={setValue} />只读
readOnly 仅展示评分，禁止交互。
tsx
<Rating value={4} readOnly />尺寸
size 控制图标大小（sm / md / lg）。
tsx
<>
<Rating defaultValue={3} size="sm" />
<Rating defaultValue={3} size="md" />
<Rating defaultValue={3} size="lg" />
</>自定义颜色
color 接受 token var() 或任意 CSS 颜色，hover 自动派生。
tsx
<Rating defaultValue={4} color="var(--color-warning)" />自定义图标
icon 透传任意图标（如 ❤️），空状态复用同形状。
tsx
<Rating
defaultValue={3}
color="var(--color-danger)"
icon={<Heart size="1em" fill="currentColor" />}
/>何时用
需要星级打分/满意度采集，或只读展示已有评分时用。零依赖自研，可换图标（心/火苗等）和颜色，星色走 token、hover 态用 color-mix 自动派生。纯只读且只需展示分值文字的场景可直接用文本，不必引入本组件。
导入
ts
import { Rating } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | number | — | 受控当前分值 |
| defaultValue | number | — | 非受控初始分值 |
| max | number | — | 星数上限 |
| readOnly | boolean | false | 只读（不可交互） |
| disabled | boolean | — | 禁用 |
| size | "sm" | "md" | "lg" | "md" | 尺寸 |
| color | string | var(--color-primary) | 星色（任意 CSS 颜色或 token var()）；hover 自动派生 |
| className | string | — | 容器类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value: number | null) => void | 受控回调，点星即触发 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 自定义图标，如 <Heart />（默认实心五角星） |
| emptyIcon | ReactNode | 自定义空状态图标，缺省时复用 icon（同形状走空色） |
禁忌 / 坑
- 回调是
onValueChange，不是原生onChange。 readOnly时不渲染任何 radio，只留一个带aria-label的静态图形；可交互时是一组真实 radio（可按 value 选中）。color传 token 须带前缀写var(--color-primary)，裸var(--primary)不解析 —— 见 [[hulian-token-color-var-needs-color-prefix]]。- 自定义
icon想填充实色须自带fill="currentColor"（如示例），否则只描边。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Upload
Playground
<Rating defaultValue={3} size="md" color="var(--color-primary)" />