Rating 评分

星级评分组件

星级评分组件，支持半星评分和只读模式，适用于评价和打分场景。

何时使用

需要对内容进行评分或展示评分时使用，如商品评价、服务打分。

代码示例

基础用法

tsx

import { Rating } from "@chaos_team/chaos-ui/ui"

export function Basic() {
return <Rating defaultValue={4} />
}

半星评分

tsx

import { Rating } from "@chaos_team/chaos-ui/ui"

export function HalfStar() {
return <Rating defaultValue={3.5} allowHalf />
}

只读模式

tsx

import { Rating } from "@chaos_team/chaos-ui/ui"

export function Readonly() {
return (
  <div className="flex flex-col gap-2">
    <Rating defaultValue={5} readonly size="sm" />
    <Rating defaultValue={4} readonly size="default" />
    <Rating defaultValue={2.5} readonly allowHalf size="lg" />
  </div>
)
}

尺寸说明

Size	说明	默认
`sm`	小号
`default`	默认	✓
`lg`	大号

API / Props

Rating

Prop	Type	Default	说明
`value`	`number`	—	Controlled value / 受控值
`defaultValue`	`number`	`0`	Default value / 默认值
`onChange`	`(value: number) => void`	—	Change callback / 变化回调
`max`	`number`	`5`	Max stars / 最大星数
`size`	`"sm" \| "default" \| "lg"`	`default`	Star size / 星星大小
`readonly`	`boolean`	`false`	Read-only / 只读
`allowHalf`	`boolean`	`false`	Allow half stars / 允许半星
`className`	`string`	—	自定义样式类名

注意事项

Client Component: 使用 "use client",依赖 React hooks/状态,需在客户端渲染。
无障碍: 使用 role="radiogroup" 和 role="radio" 支持 ARIA。

📘 完整交互式示例与控件属性请查看 Storybook 文档。