AppRating

Átomos

Abrir no Storybook

Exibe uma nota em estrelas, inclusive com meia estrela, sem permitir interação.

Quando usar: apresentar uma avaliação consolidada ou a nota de um item já calculada.

Quando não usar: a pessoa precisa informar ou editar uma nota; use um controle de formulário apropriado.

Importar

import { AppRating } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppRating.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppRating.css';

Exemplos

Default

Exemplo: AppRating, Default

const Default = () => <AppRating value={4.5} />;

Valores

Exemplo: AppRating, Valores

const Valores = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
    <AppRating value={0} />
    <AppRating value={2.5} />
    <AppRating value={4} />
    <AppRating value={5} />
  </div>
);

Tamanhos

Exemplo: AppRating, Tamanhos

const Tamanhos = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <AppRating value={4.5} size="sm" />
    <AppRating value={4.5} size="md" />
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
value*	number	—	Nota exibida, limitada entre 0 e max e arredondada para o incremento de 0,5.
label	string	—	Nome acessível. Padrão: "Nota {valor} de {max}".
max	number	5	Maior nota possível. Padrão: 5.
size	"sm" | "md"	md	Tamanho de cada estrela: 16px ou 20px. Padrão: md.