Notification

Retour plus riche que Message : muni d'un titre / d'un corps / d'une icône de type, il apparaît dans un des quatre coins et convient aux notifications système plus longues.

Utilisation de base

Utilisation de base

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

notification.success({ title: 'Sauvegarde réussie', content: 'L’œuvre a été publiée dans la galerie.' })

// Raccourci chaîne : seule la ligne de titre est rendue
notification.info('Notification système')

Méthodes de notification

Méthode	Description	Valeur de retour
info / success / warning / error / danger	Afficher une notification	{ close }
close	Fermer une notification donnée (après l'animation de sortie)	void
closeAll	Fermer toutes les notifications et démonter le conteneur	void

const handle = notification.warning({ title: 'Espace de stockage insuffisant' })
handle.close()

LhNotificationOptions

Prop	Description	Type	Valeur par défaut
title	Titre (en son absence, c'est content qui est utilisé)	string	—
content	Corps (seule la ligne de titre est rendue lorsque content vaut la même valeur que title)	string	—
duration	Délai de fermeture automatique en ms ; 0 désactive la fermeture automatique	number	4500
position	Coin d'apparition	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'
showClose	Afficher ou non le bouton de fermeture	boolean	true
closeLabel	aria-label du bouton de fermeture	string	Pack de langue (zh-CN : 关闭通知)
onClick	Rappel au clic (lorsqu'il est fourni, la carte devient cliquable)	() => void	—
onClose	Rappel à la fermeture	() => void	—
sx	Raccourci de mise en page	SxProps	—

Animation de sortie

React n'a pas de transition-group : chaque entrée gère sa propre sortie — à la fermeture, lh-notification-slide-leave-* est d'abord joué (280 ms) avant le retrait de l'enregistrement. L'animation FLIP de réorganisation n'est pas implémentée : lors des ajouts / retraits dans la file, les cartes voisines se déplacent instantanément, l'espacement de l'empilement étant assumé par le gap flex du conteneur.

Accessibilité

warning / danger utilisent role="alert" (annonce immédiate), info / success utilisent role="status" (annonce en file d'attente) ; le conteneur porte role="region" + aria-live="polite".

Styles

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