Type de notifications

Le composant de notifications non intrusives de bootstrap aussi appelé "toast" permet de donner des informations à l'utilisateur sans interrompre son travail.

Dans sa forme la plus simple, une notification est constituée d'un court message eventuellement accompagné d'un bouton de fermeture et d'une icône. Par défaut la notification disparait après quelques secondes. 

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="am-icon icon-check-circle" aria-hidden="true"></span>
    <span class="libelle">...</span>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>

Pour les messages plus complexes il est possile d'ajouter un texte explicatif ou des informations d'horodatage.

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="am-icon icon-check-circle" aria-hidden="true"></span>
    <span class="libelle">...</span>
    <small class="aside">...</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">...</div>
</div>

Variantes de notification

Différents styles de notifications sont disponibles pour caractériser le type d'informations transmises.

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>
<div class="toast fade show success" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>
<div class="toast fade show warning" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>
<div class="toast fade show danger" role="alert" aria-live="assertive" aria-atomic="true">
...
</div>

Exemple dynamique et placement

Les notifications peuvent être positionnées sur les bords de la page via le conteneur .notification-group et ses modificateurs .left, .center, .right, .top, .middle, .bottom. 

<div class="notification-group left|center|right top|middle|bottom">
  <div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true">
  ...
  </div>
</div>