Ajoutez de la couleur à vos Toast

Le composant Toast a fait son apparition avec la version 4.2 de Bootstrap. Il vous permet d’afficher des notifications dynamiques

Posté le par Benoît Philibert|910 vues

L’utilisation même des notifications est souvent reliée à un contexte comme par exemple une erreur de chargement ou une validation quelconque. Les mises en formes contextuelles sont dès lors indispensables dans l’organisation du framework.

Cependant, contrairement à d’autres composants (tels que card ou encore alert), pour des raisons inconnues, Toast ne dispose pas de thème couleur.

Comment ajouter un thème couleur au composant Toast

Avant de commencer la customisation, commençons par l’analyse du composant.

Découverte du composant

<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">×</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

L’élément est composé d’une classe principale .toast, d’un header et d’un body. Dans le premier nous retrouverons les informations d’en-tête classiques tel qu’un titre, la date ou l’heure ainsi que le bouton « croix » pour masquer la bulle. Dans le second, le message a afficher.

Couleur > Mots

Lorsqu’on utilise un élément visuel pour alerter l’utilisateur d’une action, la couleur aura un impact supérieur aux mots. Cette dernière permettra d’informer visuellement en un clin d’oeil l’utilisateur avant même qu’il puisse lire le contenu de l’information.

Dupliquer le fichier alert des mixins

Comme nous l’avons évoqué précédemment, plusieurs composants utilisent déjà le thème couleur. Nous allons donc dupliquer le fichier _alert.scss du dossier mixin et le renommer _toasts.scss.

Remplacez le mot alert par toast pour arriver au résultat suivant avant de sauvegarder votre nouveau fichier mixin :


@mixin toast-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .toast-link {
    color: darken($color, 10%);
  }
}

Intégrer le nouveau fichier à _mixin.scss

Après avoir créé _toasts.scss basé dans le dossier mixin, il nous faut le déclarer au sein du fichier _mixin.scss (qui se trouve dans le dossier racine SCSS).


// // Components
@import "mixins/toasts";

Collecter la fonction de colorisation du fichier _alert.scss du dossier racine SCSS

Même démarche que pour le fichier du dossier mixin, remplacez les mots alert par toast.


// Alternate styles
//
// Generate contextual modifier classes for colorizing the toast.

@each $color, $value in $theme-colors {
  .toast-#{$color} {
    @include toast-variant(theme-color-level($color, $toast-bg-level), theme-color-level($color, $toast-border-level), theme-color-level($color, $toast-color-level));
  }
}
Vous devriez avoir une erreur de compilation si vous utilisez un compilateur auto car nous utilisons des variables telles que $toast-border-level encore non déclarées.

Il est intéressant de noter que nous utilisant la fonction toast-variant précédemment déclarée dans le fichier mixin qui permet de générer les différentes variantes de colorisation de l’élément toast.

Ajouter les variables manquantes

Une fois n’est pas coutume, nous allons copier/coller les variables du composant alert ci-dessous et par la même occasion, remplacer les mots alert par toast.


$toast-bg-level:                    -10 !default;
$toast-border-level:                -9 !default;
$toast-color-level:                 6 !default;

Résultat

toast couleur thème

Télécharger les fichiers sources

...
Repository Github

Les fichiers sources sont disponibles gratuitement en téléchargement sur Github.

Télécharger les fichiers


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.