Alerte

Affiche des informations importantes sur une page.

Utilisation de base

Utilisation de base

Information

Ceci est un message d'information.

Succès

Ceci est un message de succès.

Avertissement

Ceci est un message d'avertissement (style simple).

Ceci est un message d'erreur (sans titre).

Avec un état externe

La fermeture est interne non contrôlée : cliquer sur le bouton la démonte. Enveloppez-la d'un rendu conditionnel pour pouvoir la rouvrir.

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="Succès" showIcon closable>
      Ceci est un message de succès.
    </LhAlert>
  )
}

Alert Props

Prop	Description	Type	Options	Valeur par défaut
type	Type	'info' | 'success' | 'warning' | 'danger'	—	'info'
title	Titre (la ligne de titre n'est pas rendue si non fourni)	ReactNode	—	—
closable	Fermable ou non	boolean	—	false
showIcon	Afficher ou non l'icône de type	boolean	—	false
plain	Variante plain (contour clair)	boolean	—	false
closeLabel	Nom accessible du bouton de fermeture (en son absence, valeur du pack de langue alert.close)	string	—	'关闭警告'
sx	Raccourci de mise en page	SxProps	—	—

Événements de Alert

Événement	Description	Signature du rappel	Équivalent Vue
onClose	Déclenché au clic sur le bouton de fermeture	(event: MouseEvent) => void	@close

La fermeture est non contrôlée en interne

Après un clic sur le bouton de fermeture, Alert se démonte directement (sans animation de transition) et déclenche onClose. Pour pouvoir « le rouvrir après fermeture », encapsulez-le dans un rendu conditionnel piloté par un état externe ; ne vous appuyez pas sur l'état interne du composant.

Région live d'accessibilité

Lorsque type vaut warning / danger, la sortie est role="alert" (annonce immédiate) ; info / success produisent role="status" (annonce en file d'attente), afin de ne pas interrompre l'action en cours de l'utilisateur.

Styles

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