Skip to main content

# notfications

# 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.

Modifications enregistrées

    <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.

Modifications enregistrées Il y a 11 minutes
Texte explicatif (optionnel) de la notification

    <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.

Modifications enregistrées
Modifications enregistrées
Modifications enregistrées
Modifications enregistrées

    <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`.

Placement de la notification
Modifications enregistrées 11 mins ago
Texte explicatif (optionnel) de la notification

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