AvatarGroup

Agrupa personas relacionadas mediante componentes Avatar superpuestos.

Categoría: Diseño y contenido
Import: @neural-ui/core/avatar-group
Selector: neu-avatar-group

import { NeuAvatarGroupComponent } from '@neural-ui/core/avatar-group';

Uso

Proyecta los componentes Avatar directamente en el grupo. Cada hijo controla su nombre, imagen, tamaño, color y presencia. AvatarGroup solo aporta la disposición superpuesta y una etiqueta accesible opcional. Utiliza ariaLabel o ariaLabelledBy enlazado con un título visible. El límite de miembros o su contador corresponde a la aplicación, no a esta API.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

Equipo de diseño

Ana Martín, Luis García y Marta Ruiz

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

Vista previa

Equipo de diseño

Etiqueta accesible del grupo

Usar el título visible (ariaLabelledBy)

Template generado: refleja las opciones anteriores. Abre Código para ver los imports y el estado completos.

<neu-avatar-group
  ariaLabel="Equipo de diseño"
>
  <neu-avatar name="Ana Martín" size="md" />
  <neu-avatar name="Luis García" size="md" />
  <neu-avatar name="Marta Ruiz" size="md" />
</neu-avatar-group>

Datos y contenido

Solo ariaLabel y ariaLabelledBy son Inputs del grupo. Las propiedades de Avatar corresponden a cada hijo. No tiene Outputs ni modelos; la proyección no añade interacción de selección de miembros.

Accesibilidad y teclado

Un grupo nombrado expone el rol group. Sin nombre no añade un rol de grupo redundante. Los ID de títulos referenciados deben existir y ser únicos. Cada Avatar conserva su propio nombre accesible. Proporciona una lista de nombres cercana si se necesita identificar a todas las personas.

Tecla	Acción
`—`	Un grupo nombrado expone el rol group. Sin nombre no añade un rol de grupo redundante. Los ID de títulos referenciados deben existir y ser únicos. Cada Avatar conserva su propio nombre accesible. Proporciona una lista de nombres cercana si se necesita identificar a todas las personas.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible del grupo; activa su semántica.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	ID de un título visible existente que nombra el grupo.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`*` Avatar hijos Ver ejemplo	Proyección de contenido Proyecta componentes Avatar; cada hijo controla su identidad y apariencia.	`<ng-content />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Avatar hijos

*

El grupo proyecta los Avatar hijos; cada hijo controla su imagen, iniciales y tamaño.

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`