Rating

Apresentação

O componente Rating é responsável por criar sistemas de avaliação baseados em estrelas que permitem aos usuários atribuir pontuações ou classificações. Ele oferece uma interface intuitiva com estrelas clicáveis e suporta diferentes escalas de avaliação.

Quando usar

• Para avaliação de produtos
• Para classificação de serviços
• Para feedback de usuários
• Para avaliação de conteúdo
• Para classificação de restaurantes
• Para avaliação de aplicativos
• Para feedback de atendimento
• Para classificação de experiências

Forma básica de uso

import { Rating } from 'eitri-luminus';

// Rating básico com 5 estrelas
<Rating max={5} />

// Rating com valor inicial
<Rating max={5} value={3} />

// Rating com onChange
<Rating 
  max={5} 
  value={rating} 
  onChange={(e) => setRating(Number(e.target.value))}
/>

// Rating somente leitura
<Rating 
  max={5} 
  value={4} 
  readOnly={true}
/>

// Rating com classes personalizadas
<Rating 
  max={5} 
  value={3} 
  className="rating-lg"
/>

// Rating com 10 estrelas
<Rating 
  max={10} 
  value={7}
/>

// Rating com id personalizado
<Rating 
  max={5} 
  value={2} 
  id="avaliacao-produto"
/>

// Rating com estilo inline
<Rating 
  max={5} 
  value={4}
  style={{ 
    gap: '4px',
    fontSize: '20px'
  }}
/>

// Rating para avaliação de restaurante
<Rating 
  max={5} 
  value={restaurantRating}
  onChange={(e) => setRestaurantRating(Number(e.target.value))}
/>

// Rating para feedback de serviço
<Rating 
  max={5} 
  value={serviceRating}
  readOnly={true}
  className="rating-primary"
/>

// Rating com escala de 1 a 3
<Rating 
  max={3} 
  value={1}
  onChange={(e) => console.log('Avaliação:', e.target.value)}
/>

// Rating para avaliação de conteúdo
<Rating 
  max={5} 
  value={contentRating}
  style={{
    color: '#ffd700',
    fontSize: '24px'
  }}
/>

Propriedades

Propriedade	Tipo	Descrição
max	number	Número máximo de estrelas (padrão: 5)
value	number	Valor atual da avaliação
onChange	function	Função chamada quando o valor muda
readOnly	boolean	Se o rating é somente leitura
id	string	Identificador único do componente
className	string	Classes CSS adicionais

Heranças

O componente Rating herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'rating' para estilização base
• Cada estrela usa a classe 'mask mask-star'
• Suporta diferentes escalas de avaliação (1-5, 1-10, etc)
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta modo somente leitura
• Pode ser combinado com outros componentes
• Ideal para sistemas de avaliação
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de feedback
• Funciona bem com formulários de avaliação
• Facilita a coleta de feedback
• Suporta diferentes tamanhos de estrelas
• Mantém estado consistente
• Interface intuitiva e familiar