Todos los componentes (204)

Grupo de avatares

Superficies · AvatarGroup · .amset-avatars

Qué es y cuándo usarlo

Varios avatares apilados, con un «+N» al final para los que no caben. Es una lista de verdad, y el «+N» dice quiénes son los que no se ven: un «+3» a secas no informa.

Cuándo usarlo

Quién está en algo: el equipo de un proyecto, los asistentes a una cita, quién ha visto un documento.
people es la lista, cada persona con su name (y src si hay foto). max decide cuántos se ven antes del «+N» (4 por defecto). Siempre se ve al menos uno.
size, shape y variant son los de Avatar y valen para todos.

Cuándo no

Una sola persona: Avatar.
Cuando hay que elegir o repartir personas (asignar, quitar): SelectableList o TransferList, con los nombres escritos. El grupo solo enseña.

Teclado: no es enfocable ni interactivo.

Accesibilidad: es una ul con nombre (label, obligatorio) y un li por avatar, que se anuncia con el nombre de la persona. El «+N» se lee con los nombres que faltan: «y 2 más: Jorge Peña, Sara Lima».

Aspecto fino: las variables de Avatar (--amset-avatar-size, --amset-avatar-text, --amset-avatar-ring…) y --amset-avatars-overlap, lo que se pisan: 0,5rem (0,375rem en xs; 0,75rem en lg y xl). El aro, del color de la superficie, es lo que los separa: si el grupo va sobre otro fondo, cambia --amset-avatar-ring.

Cómo se ve

<AvatarGroup
  label="Equipo del proyecto"
  people={[
    { key: 'ada', name: 'Ada Lovelace' },
    { key: 'grace', name: 'Grace Hopper' },
  ]}
/>

Props

Se importa con import { AvatarGroup } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se esta listando: "Equipo del proyecto", "Asistentes". Obligatorio.
`people`obligatoria	`readonly AvatarPerson[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`max`	`number`	Cuantos se ven antes del "+N".
`shape`	`AvatarShape`	—
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	—
`variant`	`AvatarVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-avatars-overlap`	`0.5rem`

Cómo se cambia

.amset-avatars {
  --amset-avatars-overlap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: