Avaliação

As avaliações fornecem informações sobre opiniões e experiências de outros usuários com um produto. Os usuários também podem avaliar os produtos que compraram.

Avaliações simples

Avaliações customizadas

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

Feedback ao passar o mouse

Você pode exibir um rótulo ao passar o mouse para ajudar os usuários a escolher o valor de avaliação correto. A demonstração usa a propriedade 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>}

Meias avaliações

A avaliação pode exibir qualquer número flutuante com a propriedade value. Use a propriedade precision para definir a alteração mínima do valor de incremento permitida.

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

Tamanhos

Gosta de avaliações maiores ou menores? Use a propriedade size.

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

Acessibilidade

(WAI tutorial: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating)

A acessibilidade neste componente conta com:

Um grupo de botões é usado com seus campos visualmente ocultos. Ele contém seis botões de opção, um para cada estrela e outro para 0 estrelas, que é marcado por padrão. Certifique-se de que você está fornecendo uma propriedade name, que é exclusivo para o formulário principal.
Os rótulos dos botões de opção contêm o texto atualmente como ("1 Star", "2 Star", …). Certifique-se de fornecer uma propriedade getLabelText quando o idioma da página não for o inglês.

API

<Rating />