BjNotice

Bandeau avec variantes default, info, warning et alert ; titre et icône optionnels, fermeture optionnelle et événement close.

Utilisation

<script setup>
import { BjNotice } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <BjNotice variant="info" closable icon="ri-information-line" title="Maintenance prévue" @close="onClose">
    Le service sera indisponible dimanche de 2 h à 4 h.
  </BjNotice>
</template>

Variantes

default

info

Détail info.

warning

Détail warning.

alert

Détail alert.

<BjNotice variant="default">Message neutre.</BjNotice>
<BjNotice variant="info" icon="ri-information-line" title="Info">Détail info.</BjNotice>
<BjNotice variant="warning" icon="ri-alert-line" title="Attention">Détail warning.</BjNotice>
<BjNotice variant="alert" icon="ri-error-warning-line" title="Alerte">Détail alert.</BjNotice>

Icône et titre

Titre + icône

Corps.

Sans icône

Corps.

<BjNotice icon="ri-information-line" title="Titre seul">Corps.</BjNotice>
<BjNotice title="Sans icône">Corps sans icône à gauche.</BjNotice>

Fermeture (closable)

Maintenance prévue

Le service sera indisponible dimanche de 2 h à 4 h.

<BjNotice variant="info" closable title="Fermable" @close="onClose">
  Contenu
</BjNotice>

Combinaisons

warning + closable + icône

Combinaison complète.

<BjNotice variant="warning" closable icon="ri-alert-line" title="Complet" @close="onClose">
  Variante + icône + titre + fermeture.
</BjNotice>

Slot par défaut

Le détail du message est dans le slot par défaut (souvent un paragraphe).

<BjNotice variant="info" title="Détail">
  <p>Paragraphe un.</p>
  <p class="bj-text-sm">Paragraphe secondaire.</p>
</BjNotice>

Événements

Écoutez @close pour mettre à jour un état ou journaliser.

<script setup>
function onClose() {
  console.log('Notice fermée')
}
<\/script>

<template>
  <BjNotice closable variant="alert" title="Erreur" @close="onClose">Message critique.</BjNotice>
</template>

Props

Prop	Description
`variant`	default (défaut), info, warning ou alert.
`closable`	Affiche le bouton fermer ; masque le bandeau et émet close.
`title`	Titre au-dessus du slot.
`icon`	Classe d’icône à gauche du corps.
`(div attrs)`	Attributs transmis au div racine.

Émissions

Émission	Description
`close`	Émis après fermeture locale si closable.