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 :

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

Le code a bien été copié !