Toasts

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 :

• Les toasts sont opt-in pour des raisons de performances, vous devez donc les initialiser vous -même .
• Les toasts seront automatiquement masqués si vous ne spécifiez pas autohide: false.

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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Exemple en direct

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.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Nous utilisons le JavaScript suivant pour déclencher notre démo live toast :

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translucide

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

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

Empilage

Vous pouvez empiler des toasts en les enveloppant dans un récipient à toasts, ce qui ajoutera un espacement vertical.

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenu personnalisé

Personnalisez vos toasts en supprimant des sous-composants, en les ajustant avec des utilitaires ou en ajoutant votre propre balisage. Ici, nous avons créé un toast plus simple en supprimant la valeur par défaut .toast-header, en ajoutant une icône de masquage personnalisée à partir de Bootstrap Icons et en utilisant certains utilitaires flexbox pour ajuster la mise en page.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternativement, vous pouvez également ajouter des commandes et des composants supplémentaires aux toasts.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Schémas de couleurs

En vous appuyant sur l'exemple ci-dessus, vous pouvez créer différents schémas de couleurs de pain grillé avec nos utilitaires de couleur et d'arrière -plan. Ici, nous avons ajouté .text-bg-primaryau .toast, puis ajouté .btn-close-whiteà notre bouton de fermeture. Pour un bord net, nous supprimons la bordure par défaut avec .border-0.

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 accordez un long delaydélai d'attente au toast , 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.

CSS

variables

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les toasts utilisent désormais des variables CSS locales .toastpour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
  

Variables SSS

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Usage

Initialiser les toasts via JavaScript :

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Déclencheurs

Le rejet peut être obtenu avec l' dataattribut sur un bouton dans le toast , comme illustré ci-dessous :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ou sur un bouton à l'extérieur du toast en utilisant data-bs-targetcomme illustré ci-dessous :

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Choix

Comme les options peuvent être transmises via des attributs de données ou JavaScript, vous pouvez ajouter un nom d'option à data-bs-, comme dans data-bs-animation="{value}". Assurez-vous de changer le type de casse du nom de l'option de " camelCase " à " kebab-case " lors du passage des options via les attributs de données. Par exemple, utilisez à la data-bs-custom-class="beautifier"place de data-bs-customClass="beautifier".

Depuis Bootstrap 5.2.0, tous les composants prennent en charge un attribut de données expérimentaldata-bs-config réservé pouvant héberger une configuration de composant simple sous forme de chaîne JSON. Lorsqu'un élément a des attributs data-bs-config='{"delay":0, "title":123}'et , la valeur finale sera et les attributs de données séparés remplaceront les valeurs données sur . De plus, les attributs de données existants peuvent héberger des valeurs JSON telles que .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Méthodes

Événements

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})