Notificación

Una retroalimentación más densa que Message: con título / cuerpo / icono de tipo, surge desde las cuatro esquinas y es adecuada para notificaciones del sistema con contenido más largo.

Uso básico

Uso básico

import { notification } from '@lh-ui/react'
import '@lh-ui/react/style/notification'

notification.success({ title: 'Guardado correctamente', content: 'La obra se ha publicado en la galería.' })

// Abreviatura de cadena: solo renderiza la fila de título
notification.info('Notificación del sistema')

Métodos de notification

Método	Descripción	Valor de retorno
info / success / warning / error / danger	Muestra una notificación	{ close }
close	Cierra la notificación indicada (reproduce primero la animación de salida)	void
closeAll	Cierra todas las notificaciones y desmonta el contenedor	void

const handle = notification.warning({ title: 'Espacio de almacenamiento insuficiente' })
handle.close()

LhNotificationOptions

Prop	Descripción	Tipo	Predeterminado
title	Título (si no se pasa, se toma de content)	string	—
content	Cuerpo (si coincide con title, solo se renderiza la fila de título)	string	—
duration	Milisegundos para el cierre automático; 0 significa que no se cierra solo	number	4500
position	Posición de aparición	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'
showClose	Si se muestra el botón de cierre	boolean	true
closeLabel	aria-label del botón de cierre	string	Paquete de idioma (zh-CN: 关闭通知)
onClick	Callback de clic (al pasarlo, la tarjeta se puede pulsar)	() => void	—
onClose	Callback al cerrar	() => void	—
sx	Props rápidas de layout	SxProps	—

Animación de salida

React no dispone de transition-group, por lo que cada entrada gestiona su propia salida: al cerrar, primero se reproduce lh-notification-slide-leave-* (280 ms) y luego se elimina el registro. La animación FLIP de reubicación no está implementada: al añadir o quitar entradas, las tarjetas contiguas saltan de forma instantánea; el espaciado del apilado lo absorbe el flex gap del contenedor.

Accesibilidad

warning / danger son role="alert" (anuncio inmediato); info / success son role="status" (anuncio en cola); el contenedor es role="region" + aria-live="polite".

Estilos

import '@lh-ui/react/style/notification'