评分

评分提供了关于他人观点和经验的见解，并允许用户提交自己的评分。

基本评分

评分精度

评分可以使用 value 属性显示任何浮点数。使用 precision 属性定义允许的最小增量值更改。

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

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

按 回车键 开始编辑

悬停反馈

您可以在悬停时显示标签，以帮助用户选择正确的评分值。此演示使用了 onChangeActive 属性。

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

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

按 回车键 开始编辑

尺寸

对于更大或更小的评分，请使用 size 属性。

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

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

按 回车键 开始编辑

自定义

以下是一些自定义组件的示例。您可以在覆盖文档页面中了解更多信息。

<Typography component="legend">Custom icon and color</Typography>
<StyledRating
  name="customized-color"
  defaultValue={2}
  getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
  precision={0.5}
  icon={<FavoriteIcon fontSize="inherit" />}
  emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />

<Typography component="legend">Custom icon and color</Typography>
<StyledRating
  name="customized-color"
  defaultValue={2}
  getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
  precision={0.5}
  icon={<FavoriteIcon fontSize="inherit" />}
  emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />

按 回车键 开始编辑

单选按钮组

评分是通过单选按钮组实现的，设置 highlightSelectedOnly 可以恢复自然行为。

<StyledRating
  name="highlight-selected-only"
  defaultValue={2}
  IconContainerComponent={IconContainer}
  getLabelText={(value: number) => customIcons[value].label}
  highlightSelectedOnly
/>

<StyledRating
  name="highlight-selected-only"
  defaultValue={2}
  IconContainerComponent={IconContainer}
  getLabelText={(value: number) => customIcons[value].label}
  highlightSelectedOnly
/>

按 回车键 开始编辑

可访问性

(WAI 教程)

此组件的可访问性依赖于

一个字段视觉上隐藏的单选按钮组。它包含六个单选按钮，每个星星一个，另一个用于 0 星星，默认情况下处于选中状态。请务必为 name 属性提供一个对父表单唯一的值。
包含实际文本（“1 星”，“2 星”，...）的单选按钮标签。当页面使用英语以外的语言时，请务必为 getLabelText 属性提供合适的函数。您可以使用包含的语言环境，或提供您自己的语言环境。
评分图标在视觉上要有明显的区分。默认情况下，评分组件同时使用颜色和形状的差异（填充和空心图标）来指示值。如果您仅使用颜色作为指示值的唯一手段，则信息也应以文本形式显示，如本演示所示。这对于符合 WCAG2.1 的成功标准 1.4.1 非常重要。

良好

<Rating
  name="text-feedback"
  value={value}
  readOnly
  precision={0.5}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
<Box sx={{ ml: 2 }}>{labels[value]}</Box>

<Rating
  name="text-feedback"
  value={value}
  readOnly
  precision={0.5}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
<Box sx={{ ml: 2 }}>{labels[value]}</Box>

按 回车键 开始编辑

ARIA

只读评分具有“img”角色，以及描述显示评分的 aria-label。

键盘

由于评分组件使用单选按钮，键盘交互遵循原生浏览器行为。“Tab”键将焦点放在当前评分上，光标键控制选定的评分。

只读评分不可聚焦。

API

请参阅下面的文档，以获得此处提及的组件的所有属性和类的完整参考。

<Rating />