Veil (Voile)
Le voile est un arrière-plan translucide qui vient se positionner au-dessus la page actuelle et sous un autre composant.
Usage
- Le voile permet d’attirer l’attention de l’utilisateur sur le composant associé en isolant visuellement et fonctionnellement ce composant.
- Il apparaît et disparaît en même temps que le composant qu’il accompagne.
- Tant que le voile est visible, le reste de l’écran est inaccessible.
- Un tape / clic sur lui provoque sa fermeture.
Style & code
Dépendances :
- Classe
sipaui
sur un parent (par exemple le<body>
), - Helpers (classes d’aide).
Standard
Pour créer un voile, il suffit d’un <div>
avec la classe .su-veil
. Le voile sera invisible par défaut.
Le voile doit être déjà présent dans le DOM afin qu’il n’y ait pas de latence dans son affichage.
Au choix, vous pouvez utiliser un voile sur toute la page pour l’ensemble des composants qui en ont besoin, ou créer un voile par composant. Si vous maîtrisez l’ensemble de la page, choisissez plutôt un voile unique pour alléger la page (il faudra alors juste lui associer tous les cas de fermeture). Si vous ne créez qu’un bloc qui doit s’inscrire dans une page que vous ne maîtrisez pas, intégrez le voile dans votre bloc, quitte à ce qu’il y en ait plusieurs sur la page.
Déclenchement
Pour déclencher l’apparition du voile, il faut utiliser sur le déclencheur un toggleclass visant le body et le voile : data-sutoggleclass='[{"sel":"body","klass":"su-no-scroll","force":1}, {"sel":"#veil-1","klass":"su-veil-in","force":1}]'
. Il positionnera la classe su-no-scroll
sur le <body>
(pour empêcher le scroll tant que le voile est visible) et la classe su-veil-in
sur le voile pour l’afficher. Le paramètre "#veil-1"
du sélecteur "sel"
est l’ID de votre voile. Donnez-lui un nom qui ne risque pas d’être utilisé par ailleurs…
Fermeture
Pour fermer le voile au tape / clic sur celui-ci, il faut utiliser encore le toggleclass avec comme paramètres : {"sel":"body","klass":"su-no-scroll","force":0}, {"sel":"#veil-1","klass":"su-veil-in","force":0}
sur le <div>
du voile.
<div id="veil-1" class="su-veil" data-sutoggleclass='[{"sel":"body","klass":"su-no-scroll","force":0}, {"sel":"#veil-1","klass":"su-veil-in","force":0}]'></div>
<!-- Déclencheur -->
<a class="su-button su-primary" href="javascript:;" data-sutoggleclass='[{"sel":"body","klass":"su-no-scroll","force":1}, {"sel":"#veil-1","klass":"su-veil-in","force":1}]'>Afficher le voile</a>
Liste des classes disponibles
su-veil
su-veil-in
(posée automatiquement par le JS)
Classes annexes
su-no-scroll
(posée automatiquement par le JS, dépendant des Helpers (classes d’aide))