Notification

Vue d'ensemble

Les notifications, sont des éléments qui s'affichent majoritairement dynamiquement après une action de l'utilisateur pour l'informer d'un état ou autre. Par exemple lorsque l'utilisateur se connecte, une notification pourra apparaitre pour lui signaler si tout c'est bien passé comme prévu ou pas.

Généralement, le composant HTML de notification, tout comme les modals, sera placé en tout fin de votre page. Néanmoins, les boites de notification peuvent être visibles statiquement et n'importe où dans votre page en ajoutant les variables utilitaires globales style="--op:1.0; --zi:unset;".

Le contrôle de la largeur se fait grâce à la variable locale style="--ntf-w:100%;".
Par défaut la boite s'adapte à la largeur du contenu.

Pour une accessibilité accrue le role="status" doit être ajouté.

Le design des notifications est contrôlé via les classes utilitaires .ui--???? ou les points d'interrogations désignent le style.

Standard

Boite de notification standard

Primary

Boite de notification standard primary

Primary

Boite de notification standard secondary

WARNING

Boite de notification warning

INFO

Boite de notification info

DANGER

Boite de notification danger

SUCCESS

Boite de notification success 

<div role="status" class="notification" style="--op:1; --zi:unset;">
	<div class="notification__content">
		<h4>Standard</h4>
		Boite de notification standard
	</div>
</div>
<div role="status" class="notification ui--primary" style="--op:1; --zi:unset; --mt:1em;">
	<div class="notification__content">
		<h4>Primary</h4>
		Boite de notification standard primary
	</div>
</div>
<div role="status" class="notification ui--secondary" style="--op:1; --zi:unset; --mt:1em;">
	<div class="notification__content">
		<h4>Primary</h4>
		Boite de notification standard secondary
	</div>
</div>
<div role="status" class="notification ui--warning" style="--op:1; --zi:unset; --mt:1em;">
	<span></span>
	<div class="notification__content">
		<h4>WARNING</h4>
		<p>
			Boite de notification warning
		</p>
	</div>
</div>
<div role="status" class="notification ui--info" style="--op:1; --zi:unset; --ntf-w: 50%; --mt:1em;">
	<span></span>
	<div class="notification__content">
		<h4>INFO</h4>
		<p>
			Boite de notification info
		</p>
	</div>
</div>
<div role="status" class="notification ui--danger" style="--op:1; --zi:unset; --ntf-w: 75%; --mt:1em;">
	<div class="notification__content">
		<h4>DANGER</h4>
		<p>
			Boite de notification danger
		</p>
	</div>
	<span></span>
</div>
<div role="status" class="notification ui--success" style="--op:1; --zi:unset; --ntf-w: 100%; --mt:1em;">
	<span></span>
	<div class="notification__content">
		<h4 class="notification__title">SUCCESS</h4>
		<p class="notification__message">
			Boite de notification success
		</p>
	</div>
</div>

Rendu dynamique

Pour un comportement dynamique, un objet Javascript global notify issue de la classe Javascript Notify est à disposition. Il vous permettra d'afficher toutes vos notifications à l'endroit que vous voulez.

Les boites de notifications, pourront se fermer automatiquement au bout d'un certain délai, ou via le click de l'utilisateur sur celle-ci. Un bouton de fermeture pourra être affichée ... Toutes ces options sont en paramètre des fonctions permettant la création des boites de notification.

Par défaut. La durée d'affichage des boites n'est pas définie, elles se ferment donc au click de l'utilisateur. L'icône ainsi que le bouton de fermeture sont affichés. La position de l'affichage des notifications, est centrée en haut de la page. L'animation est configurée sur Slide. 

import notify from "./vendors/sass-swing/notify.js";

/* Paramètres par défaut. */
const defaultConfig = {
	showDuration :0, // durée de l'animation en ms
	closeOnClick: false,
	displayCloseButton:true,
	displayIcon: true,
	animationType: "slide", // fade, slide
	position:"top-center"	 // top-left, top-right, mid-left, mid-center, mid-right, bottom-left, bottom-center, bottom-right
};

/** notification personnalisée : notify( title, message, type = 'default', config={})
 * @param {String} title
 * @param {String} message
 * @param {String} type ("default"", "success", "warning", "danger", "info", "primary"... cf classes css ui--???)
 * @param {Object} config
 */
notify.notify("Defaut", "Notification simple");

const customConfig = {
	displayCloseButton: false,
	displayIcon: false,
  closeOnClick: true,
	showDuration:5000
}
notify.notify("Defaut", "Notification simple et auto-close", "default", customConfig);

/**
 * Notification de type "Success", "Warning", "Info", "Danger"
 * @param {String} title
 * @param {String} message
 * @param {Object} config
 */
notify.success("Success", "Notification Success", customConfig);
notify.warning("Warning", "Notification Warning");
notify.info("Info", "Notification Info");
notify.danger("Danger", "Notification Danger");

Rendu coté serveur

Vous utilisez un framework back-end tel que Symfony par exemple ?.

Pour gérer les notifications. Sass Swing met à disposition des classes CSS .notification--auto-close--???? pour gérer l'animation d'apparition et de disparition automatique sans Javascript

Les animations disponibles sont : fade, slide-top, slide-bottom, slide-right et slide-right

Voici un exemple d'utilisation avec le moteur de template Twig 

<div class="notifications notifications--top-center">
	{%  for flashType, flashMessages in app.flashes %}
	  <div role="status" class="notification ui--{{ flashType }} notification--auto-close--slide-top">
	    <span></span>
	    <div class="notification__content">
	        {% for message in flashMessages %}
	          <p>{{ message }}</p>
	        {% endfor %}
	    </div>
	  </div>
	{% endfor %}
</div>