Alerte

Bandeau d'avertissement statique à valeur sémantique. Quatre types, icônes, style sobre et fermeture possible.

Alerte

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="Annonce de la collection" show-icon>La version numérique haute définition de « Voyageurs parmi les montagnes et les rivières » est en ligne, venez l'admirer.</LhAlert>
    <LhAlert type="success" title="Numérisation terminée" show-icon closable>La numérisation haute définition de 120 peintures des Song a été archivée.</LhAlert>
    <LhAlert type="warning" title="Écart de calibrage colorimétrique" show-icon plain closable>3 valeurs de couleur s'écartent de la référence, vérification conseillée.</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      Pas d'icône + nom accessible personnalisé pour le bouton de fermeture.
    </LhAlert>
    <LhAlert type="info" plain>Style sobre en texte seul (plain), sans titre.</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: 'Révision refusée',
    closeLabel: 'Fermer cette alerte',
  }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
type	Type sémantique	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	Titre (le slot title est également disponible)	string	—
closable	Fermeture possible ou non	boolean	false
showIcon	Afficher l'icône sémantique ou non	boolean	false
plain	Style sobre pastel ou non	boolean	false
closeLabel	Nom accessible du bouton de fermeture (en l'absence de valeur, c'est alert.close du pack de langue qui est utilisé)	string	—
sx	Raccourci de mise en page sx	—	—

Slots

Slot	Description
title	Zone de titre (titre prop par défaut)
default	Description du corps