Rating 评分

用于用户反馈和评论的星级评分。

导入

import { Rating } from 'asterui'

示例

基础评分

无需配置的简单 5 星评分。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} />
    )
}

export default App

可清除

再次点击相同的星星以清除评分。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} allowClear />
    )
}

export default App

不同尺寸

各种尺寸的评分。

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xs</span><Rating size="xs" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">sm</span><Rating size="sm" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating size="md" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating size="lg" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xl</span><Rating size="xl" defaultValue={3} /></div>
      </Space>
    )
}

export default App

半星

允许半星精度。

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating defaultValue={2.5} allowHalf /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating defaultValue={2.5} allowHalf size="lg" /></div>
      </Space>
    )
}

export default App

心形

带有心形图标的评分。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={4} mask="heart" color="bg-error" />
    )
}

export default App

自定义颜色

使用 Rating.Item 为每个评分级别设置不同的颜色。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3}>
        <Rating.Item value={1} color="bg-error" />
        <Rating.Item value={2} color="bg-warning" />
        <Rating.Item value={3} color="bg-warning" />
        <Rating.Item value={4} color="bg-success" />
        <Rating.Item value={5} color="bg-success" />
      </Rating>
    )
}

export default App

禁用

显示评分而不交互。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating value={4} disabled />
    )
}

export default App

自定义数量

指定不同数量的星星。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={7} count={10} />
    )
}

export default App

受控评分

从外部控制评分值。

Current rating: 0

import { Rating } from 'asterui'
import { useState } from 'react'

function App() {
  const [rating, setRating] = useState(0)
  
  return (
      <div>
        <Rating value={rating} onChange={setRating} />
        <p className="mt-2">Current rating: {rating}</p>
      </div>
    )
}

export default App

替代星星

不同的星星样式。

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} mask="star" color="bg-success" />
    )
}

export default App

表单集成

评分与表单验证配合使用。

import { Rating, Form, notification, Button } from 'asterui'

function App() {
  const handleSubmit = (values: { rating?: number }) => {
    notification.success({ message: 'Submitted!', description: `Rating: ${values.rating}` })
  }
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ rating: 3 }}>
        <Form.Item
          name="rating"
          label="Your rating"
          rules={{ required: 'Please provide a rating' }}
        >
          <Rating />
        </Form.Item>
        <Button htmlType="submit" color="primary">Submit</Button>
      </Form>
    )
}

export default App

API

`Rating`

属性	描述	类型	默认值
`children`	自定义 Rating.Item 组件(可选)	`React.ReactNode`	-
`value`	受控评分值	`number`	-
`defaultValue`	默认评分值(非受控)	`number`	`0`
`onChange`	评分更改时的回调	`(value: number) => void`	-
`onHoverChange`	悬停值更改时的回调	`(value: number) => void`	-
`count`	星星数量	`number`	`5`
`size`	评分大小	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`gap`	星星之间的间距	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	Tailwind 背景颜色类	`string`	`'bg-warning'`
`mask`	评分图标的形状	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`allowClear`	允许通过点击相同值清除评分	`boolean`	`true`
`allowHalf`	允许半星选择	`boolean`	`false`
`disabled`	禁用状态(非交互式)	`boolean`	`false`
`className`	额外的 CSS 类	`string`	-
`data-testid`	用于测试的测试 ID	`string`	-

`Rating.Item`

属性	描述	类型	默认值
`value`	此项目代表的评分值	`number`	-
`mask`	评分图标的形状	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`color`	Tailwind 背景颜色类	`string`	`'bg-warning'`
`hidden`	用于清除评分的隐藏项目	`boolean`	`false`
`half`	半星位置	`'first' \| 'second'`	-
`className`	额外的 CSS 类	`string`	-
`data-testid`	用于测试的测试 ID	`string`	-

可访问性

使用 role="radiogroup" 以获得正确的语义
使用单选按钮模式进行评分选择
每个星星都有描述其值的 aria-label
评分选项之间的键盘导航
悬停预览在选择之前显示视觉反馈
禁用状态在显示值时阻止交互