Message (notificación breve)

Retroalimentación ligera en una capa flotante global: éxito / fracaso de una operación, estado de la red, etc. Se monta en un contenedor singleton y los mensajes se apilan de arriba abajo.

Uso básico

Uso básico

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

message.success('Guardado correctamente')

Métodos de message

Método	Descripción	Valor de retorno
info / success / warning / error / danger	Muestra un mensaje	{ close }
loading	Muestra un mensaje de carga (no se cierra automáticamente por defecto)	{ close }
destroyAll	Cierra todos los mensajes y desmonta el contenedor	void

El manejador devuelto sirve para cerrar el mensaje de forma activa:

const handle = message.loading('Subiendo…', { duration: 0 })
// ...
handle.close()

LhMessageOptions

Prop	Descripción	Tipo	Predeterminado
duration	Milisegundos para el cierre automático; 0 significa que no se cierra solo (en la semántica de loading, por defecto 0)	number	3000
showClose	Si se muestra el botón de cierre	boolean	false
offset	Desplazamiento en px respecto a la parte superior del viewport	number	20
closeLabel	aria-label del botón de cierre	string	Paquete de idioma (zh-CN: 关闭提示)
onClose	Callback al cerrar	() => void	—
sx	Props rápidas de layout	SxProps	—

Correspondencia de eventos con la versión Vue

message.success('x') equivale al LhMessage.success('x') de plus; el close() del manejador equivale al LhMessage.close(id) de plus. En el lado React se gestiona mediante el valor de retorno, no con un id global.

Accesibilidad

Éxito / información son role="status" (anuncio en cola); error / aviso son role="alert" (anuncio inmediato), en sintonía con Alert y Notification.

Estilos

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