Toasts

Notifications push à vos visiteurs avec un toast, un message d'alerte léger et facilement personnalisable.

Les toasts sont des notifications légères conçues pour imiter les notifications push qui ont été popularisées par les systèmes d'exploitation mobiles et de bureau. Ils sont construits avec flexbox, ils sont donc faciles à aligner et à positionner.

Aperçu

Choses à savoir lors de l'utilisation du plugin toast :

Si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .
Les toasts sont opt-in pour des raisons de performances, vous devez donc les initialiser vous -même .
Veuillez noter que vous êtes responsable du positionnement des toasts.
Les toasts seront automatiquement masqués si vous ne spécifiez pas autohide: false.

L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité .

Exemples

De base

Pour encourager les toasts extensibles et prévisibles, nous recommandons un en-tête et un corps. Les en-têtes Toast utilisent display: flex, permettant un alignement facile du contenu grâce à nos utilitaires margin et flexbox.

Les toasts sont aussi flexibles que vous le souhaitez et ont très peu de balisage requis. Au minimum, nous exigeons qu'un seul élément contienne votre contenu "grillé" et encourageons fortement un bouton de rejet.

Bonjour le monde! Ceci est un message toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Vivre

Cliquez sur le bouton ci-dessous pour afficher un toast (positionné avec nos utilitaires dans le coin inférieur droit) qui a été masqué par défaut avec .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Translucide

Les toasts sont légèrement translucides pour se fondre dans ce qui se trouve en dessous.

Bonjour le monde! Ceci est un message toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Empilage

Lorsque vous avez plusieurs toasts, nous les empilons verticalement par défaut de manière lisible.

Voir? Juste comme ça.

Attention, les toasts s'empileront automatiquement

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Placement

Placez des toasts avec du CSS personnalisé selon vos besoins. Le coin supérieur droit est souvent utilisé pour les notifications, tout comme le milieu supérieur. Si vous ne devez afficher qu'un seul toast à la fois, placez les styles de positionnement directement sur le fichier .toast.

Bonjour le monde! Ceci est un message toast.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Pour les systèmes qui génèrent plus de notifications, envisagez d'utiliser un élément d'emballage afin qu'ils puissent facilement s'empiler.

Voir? Juste comme ça.

Attention, les toasts s'empileront automatiquement

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Vous pouvez également faire preuve de fantaisie avec les utilitaires flexbox pour aligner les toasts horizontalement et/ou verticalement.

Bonjour le monde! Ceci est un message toast.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accessibilité

Les toasts sont destinés à être de petites interruptions pour vos visiteurs ou utilisateurs, donc pour aider ceux qui ont des lecteurs d'écran et des technologies d'assistance similaires, vous devez envelopper vos toasts dans une aria-liverégion . Les modifications apportées aux régions en direct (telles que l'injection/la mise à jour d'un composant toast) sont automatiquement annoncées par les lecteurs d'écran sans qu'il soit nécessaire de déplacer le focus de l'utilisateur ou de l'interrompre d'une autre manière. De plus, incluez aria-atomic="true"pour vous assurer que le toast entier est toujours annoncé comme une seule unité (atomique), plutôt que d'annoncer simplement ce qui a été modifié (ce qui pourrait entraîner des problèmes si vous ne mettez à jour qu'une partie du contenu du toast, ou si vous affichez le même contenu de toast à un moment ultérieur). Si les informations nécessaires sont importantes pour le processus, par exemple pour une liste d'erreurs dans un formulaire, utilisez le composant d'alerteau lieu de pain grillé.

Notez que la région en direct doit être présente dans le balisage avant que le toast ne soit généré ou mis à jour. Si vous générez dynamiquement les deux en même temps et que vous les injectez dans la page, ils ne seront généralement pas annoncés par les technologies d'assistance.

Il faut aussi adapter le roleet le aria-liveniveau en fonction du contenu. S'il s'agit d'un message important comme une erreur, utilisez role="alert" aria-live="assertive", sinon utilisez des role="status" aria-live="polite"attributs.

Au fur et à mesure que le contenu que vous affichez change, assurez-vous de mettre à jour le delaydélai d'expiration afin que les utilisateurs aient suffisamment de temps pour lire le toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Lorsque vous utilisez autohide: false, vous devez ajouter un bouton de fermeture pour permettre aux utilisateurs de rejeter le toast.

Bonjour le monde! Ceci est un message toast.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Bien qu'il soit techniquement possible d'ajouter des commandes focalisables/actionnables (telles que des boutons ou des liens supplémentaires) dans votre toast, vous devez éviter de le faire pour masquer automatiquement les toasts. Même si vous donnez au toast un long delaydélai d'attente , les utilisateurs du clavier et des technologies d'assistance peuvent avoir du mal à atteindre le toast à temps pour agir (car les toasts ne reçoivent pas le focus lorsqu'ils sont affichés). Si vous devez absolument avoir des contrôles supplémentaires, nous vous recommandons d'utiliser un toast avec autohide: false.

Comportement JavaScript

Usage

Initialiser les toasts via JavaScript :

$('.toast').toast(option)

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-animation="".

Nom	Taper	Défaut	La description
animation	booléen	vrai	Appliquer une transition de fondu CSS au toast
masquage automatique	booléen	vrai	Masquer automatiquement le toast
retard	Numéro	`500`	Délai de masquage du toast (ms)

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .

Consultez notre documentation JavaScript pour plus d'informations .

`$().toast(options)`

Attache un gestionnaire de toast à une collection d'éléments.

`.toast('show')`

Révèle le toast d'un élément. Revient à l'appelant avant que le toast n'ait été affiché (c'est-à-dire avant que l' shown.bs.toastévénement ne se produise). Vous devez appeler manuellement cette méthode, à la place votre toast ne s'affichera pas.

$('#element').toast('show')

`.toast('hide')`

Masque le toast d'un élément. Retourne à l'appelant avant que le toast n'ait été masqué (c'est-à-dire avant que l' hidden.bs.toastévénement ne se produise). Vous devez appeler manuellement cette méthode si vous autohidel' avez fait false.

$('#element').toast('hide')

`.toast('dispose')`

Masque le toast d'un élément. Votre toast restera sur le DOM mais ne s'affichera plus.

$('#element').toast('dispose')

Événements

Type d'événement	La description
show.bs.toast	Cet événement se déclenche immédiatement lorsque la `show`méthode d'instance est appelée.
montré.bs.toast	Cet événement est déclenché lorsque le toast a été rendu visible à l'utilisateur.
cacher.bs.toast	Cet événement est déclenché immédiatement lorsque la `hide`méthode d'instance a été appelée.
caché.bs.toast	Cet événement est déclenché lorsque le toast a fini d'être caché à l'utilisateur.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})