'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
DatosAlea Pro
PresenceStack
Quién está aquí: avatares superpuestos que muestran lo que hace cada persona, un botón +N que abre la lista completa con nombres y estados, y un aviso cortés cuando alguien entra o sale.
import { useThrottledAnnouncer } from '@alea-design/ui';import { PresenceStack } from '@alea-design/pro';
Ejemplos
Quién está aquí
Avatares con un icono de presencia cada uno; el botón +N abre a todos con nombres, estados y lugares.
Entradas y salidas
Que alguien entre o salga se anuncia con cortesía y como mucho una vez cada pocos segundos. Pulsa los botones rápido: los cambios se unen en una sola frase.
El anunciador con límite
PresenceStack, ReviewChanges y tus propias actualizaciones en vivo comparten un pequeño hook, useThrottledAnnouncer, de @alea-design/ui. Devuelve announce(message), clear() y una región para renderizar una vez. El primer mensaje se dice de inmediato; los que llegan antes de que termine el intervalo (3 segundos por defecto) se ponen en cola y se dicen juntos al terminar. No se pierde nada y nada se acumula.
No sabe nada de la red
El componente solo dibuja lo que le pasas. Tu propio código (un WebSocket, un servicio de presencia, sondeo) decide quién está aquí y fija members; nunca necesita llamar al componente.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-bg…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-0-5…--alea-space-10…--alea-space-2…--alea-space-3…--alea-space-6…--alea-space-8…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Component
--alea-hit-min…--alea-presence-size…--alea-space-14…
Props
PresenceStack props
Quién está aquí: avatares superpuestos con un icono de presencia cada uno y un botón +N que abre la lista completa con nombres y estados. No sabe nada de la red: tú pasas a las personas y él las dibuja y anuncia cuando alguien entra o sale.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
membersobligatoria | PresenceMember[] | Quién está aquí. Pásalos en el orden en que se muestran. | |
announce | boolean | true | Dice "Ana entró" y "Luis salió" a los lectores de pantalla, con cortesía y como mucho una vez cada pocos segundos. Por defecto true. |
announceInterval | number | 3000 | El tiempo mínimo entre dos avisos, en ms. Por defecto 3000. |
max | number | 4 | Muestra esta cantidad de avatares y luego un botón +N que abre la lista completa. Por defecto 4. |
size | "sm" | "md" | "lg" | "xs" | "sm" | Tamaño del avatar. Por defecto sm. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
sizesmmdlgxs- Estados
- Hover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-presence-stack.alea-presence-list.alea-presence-more.alea-presence-people.alea-presence-person.alea-presence-person-text.alea-presence-person-name.alea-presence-person-state- Atributos data
data-size=xsdata-size=mddata-size=lgdata-density=touch
Accesibilidad
- Los avatares son una lista llamada "N personas aquí". Cada uno se nombra con su estado, como en "Ana (editando)", y lleva un icono, así que el estado nunca es solo un color.
- El botón +N se llama "3 personas más. Ver a todos los presentes" y abre un diálogo con cada nombre, estado y lugar.
- Quien entra o sale se anuncia en un estado cortés, nunca en el primer renderizado y como mucho una vez cada pocos segundos: una ráfaga de cambios se une en una sola frase, así el lector de pantalla no se atrasa.
- Quien pasa a desconectado cuenta como que salió.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Llega al botón +N |
| Enter o Espacio | Abre la lista de todos los presentes |
| Esc | Cierra la lista y vuelve al botón +N |
Qué hacer y qué evitar
Hacer
- Pasa las personas en el orden en que se muestran: las primeras se dibujan y el resto va a la lista +N.
- Da a cada persona un id estable: así se distingue una entrada o una salida de un cambio de estado.
- Pon dónde están en location para que la lista lo diga ("editando, Monto").
Evitar
- No lo uses para listar a los miembros de un equipo que no está en vivo: usa AvatarGroup.
- No apagues los avisos en una página donde la gente necesita saber quién edita; sube announceInterval.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.
Presence stack · 4 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Size | Variant | SM, XS, MD, LG | SM | size |
| Overflow count | Text | - | +3 | members |
| Overflow | Boolean | - | true | max, members |