AvatarGroup

Apresentação

O componente AvatarGroup é responsável por agrupar múltiplos avatares em uma única visualização, criando um efeito de sobreposição entre eles. É útil para representar grupos de usuários, equipes ou qualquer conjunto de avatares que precise ser exibido em conjunto.

Quando usar

• Para exibir grupos de usuários
• Quando precisar mostrar múltiplos avatares em uma única visualização
• Para representar equipes ou grupos de contatos
• Quando precisar de uma visualização compacta de múltiplos perfis

Forma básica de uso

import { Avatar, AvatarGroup } from 'eitri-luminus';

// Grupo de avatares básico
<AvatarGroup>
  <Avatar>
    <Avatar.Image src="/avatar1.jpg" alt="Usuário 1" />
  </Avatar>
  <Avatar>
    <Avatar.Image src="/avatar2.jpg" alt="Usuário 2" />
  </Avatar>
  <Avatar>
    <Avatar.Image src="/avatar3.jpg" alt="Usuário 3" />
  </Avatar>
</AvatarGroup>

// Grupo de avatares com classes personalizadas
<AvatarGroup className="my-4">
  <Avatar>
    <Avatar.Image src="/avatar1.jpg" alt="Usuário 1" />
  </Avatar>
  <Avatar>
    <Avatar.Image src="/avatar2.jpg" alt="Usuário 2" />
  </Avatar>
</AvatarGroup>

Propriedades

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Heranças

O componente AvatarGroup 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 aplica automaticamente um espaçamento negativo entre os avatares (-space-x-6)
• Suporta RTL (Right-to-Left) através da classe rtl:space-x-reverse
• Os avatares são sobrepostos da direita para a esquerda por padrão
• É possível personalizar o espaçamento usando classes do Tailwind
• O componente é responsivo por padrão