Todos los componentes (244)

Centro de avisos

Superficies · NotificationCenter

Qué es y cuándo usarlo

El centro de avisos de una aplicación: el historial entero, agrupado por día o por tipo, con filtro de no leídos, marcar leído o no leído, borrar y las acciones propias de cada aviso.

Cuándo usarlo

La página o el panel de «todos los avisos», detrás de la campana de NotificationTray.
items son los avisos (title, detail, date, read, tone, type, link, actions). Cada acción sale solo si se pasa su función: onReadChange, onMarkAllRead, onRemove, onClear (con confirmación), onAction, onOpen.
groupBy: por día (Hoy, Ayer y la fecha), por tipo o sin agrupar.
useNotificationCenter(clave) guarda el historial en el navegador. Para que los avisos efímeros de NotificationProvider queden aquí, se pasa onShow al proveedor.

Cuándo no

Un aviso que se va solo a los pocos segundos: NotificationProvider.
Las últimas novedades bajo una campana: NotificationTray.

Teclado: son botones y enlaces normales; el filtro es un grupo de radio.

Accesibilidad: un aviso sin leer lo dice con una palabra además de la raya de color; cada botón nombra el aviso que toca y el recuento de no leídos se anuncia.

Aspecto fino: el tono de cada aviso pone su icono; los grupos llevan un título por encima de su lista.

Cómo se ve

TodosSin leer (2)

2 sin leer

Pedido #1042 enviadoSin leer
Sale hoy con Correos.
hace 4 días
Pago pendiente de revisarSin leer
El pedido #1043 espera confirmación.
hace 4 días
Nuevo cliente
Lucía Ferrer se ha dado de alta.
hace 5 días

Sin acciones todavía.

<NotificationCenter
  label="Avisos"
  items={avisos}
  groupBy="day"
  onReadChange={marcarLeido}
  onMarkAllRead={marcarTodos}
  onRemove={quitar}
  onClear={vaciar}
  onAction={ejecutarAccion}
/>

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly CenterNotification[]`	—
`label`obligatoria	`string`	Que centro es («Avisos»). Obligatorio.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`groupBy`	`CenterGrouping`	Como se agrupan: por dia (Hoy, Ayer, la fecha), por tipo o sin agrupar. Por defecto, por dia.
`headingLevel`	`CenterHeadingLevel`	—
`onAction`	`(key: string, action: string) => void`	Una accion propia de un aviso («Ver pedido», «Reintentar»). Recibe la clave del aviso y la de la accion.
`onClear`	`() => void`	Borrar todos, con confirmacion.
`onMarkAllRead`	`() => void`	—
`onOpen`	`(key: string) => void`	Al abrir un aviso con enlace. Por defecto, solo navega; normalmente se marca como leido.
`onReadChange`	`(key: string, read: boolean) => void`	Marcar uno como leido o no leido. Sin esto no salen los botones.
`onRemove`	`(key: string) => void`	—

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

En el banco de pruebas

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