Rating

Рейтинги дают представление о мнении и опыте других и позволяют пользователю дать собственную оценку.

Базовый рейтинг

<Typography component="legend">Controlled</Typography>
<Rating
  name="simple-controlled"
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
/>
<Typography component="legend">Read only</Typography>
<Rating name="read-only" value={value} readOnly />
<Typography component="legend">Disabled</Typography>
<Rating name="disabled" value={value} disabled />
<Typography component="legend">No rating given</Typography>
<Rating name="no-value" value={null} />

Точность рейтинга

The rating can display any float number with the value prop. Use the precision prop to define the minimum increment value change allowed.

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

Hover feedback

Вы можете показать lable при наведении курсора, чтобы помочь пользователю выбрать правильное значение рейтинга. The demo uses the onChangeActive prop.

<Rating
  name="hover-feedback"
  value={value}
  precision={0.5}
  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>
)}

Размеры

Для больших или меньших рейтингов используйте prop size.

<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) => `${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} />

Radio group

The rating is implemented with a radio group, set highlightSelectedOnly to restore the natural behavior.

<Rating
  name="highlight-selected-only"
  defaultValue={2}
  IconContainerComponent={IconContainer}
  highlightSelectedOnly
/>

Доступность

(WAI Учебник)

Доступность этого компонента зависит от:

Скрыта ли визуально группа radio-кнопок. Rating содержит шесть radio-кнопок, по одному для каждой звёздочки, а ещё одна для 0 звёзд, которые проверяются по умолчанию. Не забудьте предоставить значение для prop name, который уникален для родительской формы.
Labels for the radio buttons containing actual text (“1 Star”, “2 Stars”, …). Be sure to provide a suitable function to the getLabelText prop when the page is in a language other than English. You can use the included locales, or provide your own.
A visually distinct appearance for the rating icons. By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match success Criterion 1.4.1 of WCAG2.1.

Good

<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

The read only rating has a role of "img", and an aria-label that describes the displayed rating.

Keyboard

Because the rating component uses radio buttons, keyboard interaction follows the native browser behavior. Tab will focus the current rating, and cursor keys control the selected rating.

The read only rating is not focusable.

API

<Rating />