Message (notification globale)

Retour léger en surcouche globale : succès / échec d'une opération, état du réseau, etc. Monté dans un conteneur singleton, les messages s'empilent de haut en bas.

Utilisation de base

Utilisation de base

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

message.success('Sauvegarde réussie')

Méthodes de message

Méthode	Description	Valeur de retour
info / success / warning / error / danger	Afficher un message	{ close }
loading	Afficher un message de chargement (ne se ferme pas automatiquement par défaut)	{ close }
destroyAll	Fermer tous les messages et démonter le conteneur	void

Le descripteur renvoyé sert à fermer activement le message :

const handle = message.loading('Téléversement en cours…', { duration: 0 })
// ...
handle.close()

LhMessageOptions

Prop	Description	Type	Valeur par défaut
duration	Délai de fermeture automatique en ms ; 0 désactive la fermeture automatique (la sémantique loading vaut 0 par défaut)	number	3000
showClose	Afficher ou non le bouton de fermeture	boolean	false
offset	Décalage par rapport au sommet de la fenêtre, en px	number	20
closeLabel	aria-label du bouton de fermeture	string	Pack de langue (zh-CN : 关闭提示)
onClose	Rappel à la fermeture	() => void	—
sx	Raccourci de mise en page	SxProps	—

Correspondance des événements avec la version Vue

message.success('x') correspond au LhMessage.success('x') de plus ; la méthode close() du descripteur correspond au LhMessage.close(id) de plus. Côté React, la gestion se fait par la valeur de retour plutôt que par des identifiants globaux.

Accessibilité

Succès / information utilisent role="status" (annonce en file d'attente), erreur / avertissement role="alert" (annonce immédiate), sur le même paradigme qu'Alert et Notification.

Styles

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