'/%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}
Flujo de trabajo
InboxList
Notificaciones junto al elemento que abren: puntos de no leído, quién hizo qué, un detalle breve y cuándo. Las flechas mueven y abren, como una lista de correo.
import { InboxList } from '@alea/ui';
Ejemplos
Bandeja con el elemento abierto
La lista de la izquierda abre los elementos al recorrerla; el abierto se muestra a la derecha.
Ana Rivas
ENG-142 Focus ring missing on audio players
Can you check it in the Glass theme?
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-accent-solid…--alea-accent-strong…--alea-accent-subtle…--alea-surface-hover…--alea-text…--alea-text-muted…
Space
--alea-space-3…
Radius
--alea-radius-md…--alea-radius-sm…
Type
--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Props
InboxList props
Notificaciones en una lista junto al elemento que abren: puntos de no leído, quién hizo qué, un detalle breve y cuándo. Las flechas mueven y abren, como una lista de correo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | InboxItem[] | - | |
aria-label | string | - | Nombre de la lista. Por defecto "Bandeja de entrada". |
className | string | - | Clases extra para el elemento raíz. |
defaultSelectedId | string | null | - | El elemento abierto al inicio, sin control. |
onSelectionChange | ((id: string) => void) | - | Se llama con el id del elemento que se abre: clic o flechas (la selección sigue al foco, como en una lista de correo). |
selectedId | string | null | - | El elemento abierto, con control. |
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.
- Estados
- HoverSelected
- 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-inbox.alea-inbox-item.alea-inbox-dot.alea-inbox-avatar.alea-activity-agent.alea-inbox-text.alea-inbox-title.alea-inbox-summary.alea-inbox-meta- Atributos data
data-unread
Accesibilidad
- La lista es una lista en cuadrícula con selección única que sigue al foco, así que al moverte con las flechas se abre cada elemento, como en una lista de correo.
- Cada fila se nombra con todo lo que muestra: sin leer, el título, quién hizo qué, el detalle y cuándo.
- Sin leer es un punto y un título más marcado, y la fila dice la palabra, nunca solo el punto.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra en la lista, al elemento abierto |
| Arriba o Flecha abajo | Elemento anterior o siguiente, y lo abre |
| Inicio o Fin | Primer o último elemento |
Qué hacer y qué evitar
Hacer
- Muestra el elemento abierto junto a la lista en pantallas anchas, y en su propia pantalla en teléfonos.
- Marca un elemento como leído al abrirlo, no cuando pasa por la pantalla.
Evitar
- No pongas botones dentro de las filas: las acciones son del elemento abierto.
- No ocultes quién lo hizo cuando la notificación viene de un agente.
En Figma
InboxItem con Unread y Kind.