Rating 评分

评分组件带我们深入了解他人对产品的意见和体验。用户还可以对自己购买的产品进行评价。

简单的评分组件

自定义的评分组件

你可以参考以下一些例子来自定义组件。您可以在重写文档页中了解有关此内容的更多信息。

悬停反馈

当用户的鼠标悬停在评分组件上时，您可以展示标签以帮助他们选择分值。以下案例使用了 onChangeActive 这一属性。

<Rating
  name="hover-feedback"
  value={value}
  precision={0.5}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  onChangeActive={(event, newHover) => {
    setHover(newHover);
  }}
/>
{value !== null && <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>}

一半的评分

使用 value 属性可以让评分组件展示任何的浮点的评分值。您可以使用 precision 属性定义可变化的最小增量值。

<Rating name="half-rating" defaultValue={2.5} precision={0.5} />
<Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />

尺寸

您想要一个大一点或者小一点的评分组件吗？试着使用 size 属性吧。

<Rating name="size-small" defaultValue={2} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={2} size="large" />

无障碍设计

（WAI 教程：https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating）

这个组件的可访问性依赖于：

在使用单选框组（radio group）时，其字段在视觉上是被隐藏的。它包含六个单选按钮，其中五个用于每个星，另一个用于 0 星，其默认情况下处于选中状态。请确保您提供的 name 属性在父级表单中是独特的。
单选按钮的标签需要包含一个确切的文本（“一星”，“两星”，.......），并请确认当页面语言不是英语时，您提供了一个 getLabelText 属性。

API

<Rating />