Toasts & Banners
Notifications temporaires et bannieres persistantes pour le retour utilisateur.
BcToast
Notification temporaire apparaissant en superposition.
Variantes
Enregistre
Le document a ete sauvegarde.
Information
Une mise a jour est disponible.
Attention
Votre session expire bientot.
Erreur
La connexion au serveur a echoue.
vue
<BcToast variant="success" title="Enregistre"
desc="Le document a ete sauvegarde." />
<BcToast variant="info" title="Information"
desc="Une mise a jour est disponible." />
<BcToast variant="warning" title="Attention"
desc="Votre session expire bientot." />
<BcToast variant="error" title="Erreur"
desc="La connexion au serveur a echoue." />Auto-hide
Le toast disparait automatiquement apres la duree specifiee (en ms).
vue
<BcToast variant="success" title="Copie !" :autoHide="3000" />Avec actions
Fichier supprime
Le fichier a ete deplace dans la corbeille.
vue
<BcToast variant="info" title="Fichier supprime"
desc="Le fichier a ete deplace dans la corbeille.">
<template #actions>
<BcButton label="Annuler" variant="ghost" size="sm" />
</template>
</BcToast>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success" | "info" | "warning" | "error" | — | Variante (requis) |
title | string | — | Titre du toast (requis) |
desc | string | "" | Description |
autoHide | number | 0 | Duree en ms avant disparition (0 = permanent) |
closable | boolean | true | Bouton de fermeture |
Evenements
| Evenement | Description |
|---|---|
close | Fermeture du toast |
Slots
| Slot | Description |
|---|---|
default | Contenu personnalise |
title | Titre personnalise |
actions | Boutons d'action |
Accessibilite
role="alert"pour les varianteswarningeterrorrole="status"poursuccessetinfoaria-liveadapte au role (assertive/polite)- Fermeture au clavier avec
Escape
BcBanner
Bandeau persistant en haut de page pour les messages importants.
Variantes
vue
<BcBanner variant="info" title="Maintenance"
message="Une maintenance est prevue ce soir a 22h." />
<BcBanner variant="warn" title="Attention"
message="Certaines fonctionnalites sont degradees." />Dismissible
vue
<BcBanner v-model="show" variant="info" title="Nouveaute"
message="Decouvrez les nouvelles fonctionnalites." dismissible />Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | true | Visibilite (v-model) |
variant | "info" | "success" | "warn" | "danger" | "info" | Variante visuelle |
title | string | "" | Titre |
message | string | "" | Message |
dismissible | boolean | true | Bouton de fermeture |
icon | string | — | Icone personnalisee |
Evenements
| Evenement | Payload | Description |
|---|---|---|
update:modelValue | boolean | Changement de visibilite |
close | — | Fermeture du banner |