TOGGLECLASS
Le composant TOGGLECLASS
permet d’ajouter ou supprimer une classe. Il fonctionne comme un « d’interrupteur » : si la classe est absente, il l’ajoute, si elle est présente, il la supprime.
Syntaxe
Comme tout déclencheur JS de SipaUI il est préfixé par data-su
. À ce déclencheur on doit ajouter au moins un paramètre (klass
, cf. ci-dessous) afin de donner la(les) classe(s) à positionner / supprimer. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-sutoggleclass
et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}
. Par conséquent, il faut choisir des ''
pour encadrer le contenu de toggleclass
. Ce qui donne : data-sutoggleclass='{"paramètre":"valeur"}'
.
Paramètres
sel
: permet de choisir la cible du toggle (par défaut c’est l’élément lui-même)parent
: parent du DOM à cibler (à la place desel
)klass
: liste de classe(s) séparée(s) par des espaces (paramètre obligatoire)inverted
: inverse le comportement du toggle si nécessaire dans le cas d’un survol.force
: force permet de choisir entre toujours mettre les classes (force:1
) ou toujours les enlever (force:0
)
Classes supplémentaires
Classes CSS à mettre au même endroit que sur l’élément possédant l’attribut data-sutoggleclass
su-on-over
: permet de mettre la classe quand le pointer passe au-dessus, ou d’enlever la classe quand il partsu-delay
: permet d’altérer le comportement dessu-on-over
en déclenchant le toggle que si on est resté dans l’état pendant 400 millisecondessu-on-focus
: permet de mettre la classe quand l’élément gagne le focus, ou d’enlever la classe quand il le perd
Exemples
Démo 0 : cas basique (sur l’élément cliqué)
Basiquement, le sutoggleclass
se produira sur l’élément possédant l’attribut.
<div class="demo0">
<button class="su-button su-primary" data-sutoggleclass='{"klass":"su-small"}'>Cliquez</button>
</div>
Démo 1 : cas parent
(parent de l’élément cliqué)
Avec la propriété parent
, il est possible de cibler un élément parent en l’appelant par une classe ou un ID.
<style type="text/css">
.yellow {
background: yellow !important;
}
</style>
<div class="demo1">
<button class="su-button su-primary" data-sutoggleclass='{"parent":".sipaui","klass":"yellow"}'>Cliquez</button>
</div>
Démo 2 : cas sélecteur (différent de l’élément cliqué ou de ses parents)
Avec la propriété sel
, il est possible de paramétrer l’élément cible du sutoggleclass
partout dans le DOM. La valeur de cette propriété peut être une classe, un ID, ou toute suite de sélecteurs comme pour un ciblage en CSS.
<div class="demo2">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='{"sel":".demo-target2 p","klass":"su-hidden"}'>Cliquez</button>
<div class="demo-target2">
<p>Ceci est un exemple de texte qui sera masqué ou affiché selon le clic sur le bouton ci-dessus.</p>
</div>
</div>
Démo 3 : cas su-on-over
(survol)
Avec la classe su-on-over
, le sutoggleclass
peut être activé au survol.
<style type="text/css">
.red {
background: red !important;
}
</style>
<div class="demo3">
<button class="su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='{"sel":".demo-target3 p","klass":"red"}'>Survolez</button>
<div class="demo-target3">
<p>Ceci est un exemple de texte qui sera masqué ou affiché si le bouton ci-dessus est survolé.</p>
</div>
</div>
Démo 3a : cas su-on-over
avec délai
Avec la classe su-delay
, il est possible de laisser un temps d’attente de 400 millisecondes avant d’activer sutoggleclass
. Il permet de temporiser légèrement l’action pour éviter, par exemple, des déclenchements intempestifs au survol d’un menu…
<style type="text/css">
.red {
background: red !important;
}
</style>
<div class="demo3a">
<button class="su-delay su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='{"sel":".demo-target3 p","klass":"red"}'>Survolez</button>
<div class="demo-target3">
<p>Ceci est un exemple de texte dont le fond sera coloré si le bouton est survolé.</p>
</div>
</div>
Démo 3b : cas su-on-over
interverti
Par défaut, le survol ajoute la classe et l’enlève lorsque la souris s’en va.
Il est possible de faire l’inverse via le paramètre inverted:true
.
<style type="text/css">
.red {
background: red !important;
}
</style>
<div class="demo3b">
<button class="su-button su-primary su-margin-bottom-s su-on-over" data-sutoggleclass='[{"sel":".demo-target3b p","klass":"red","inverted":true}]'>Survolez</button>
<div class="demo-target3b">
<p class="red">Ceci est un exemple de texte dont le fond sera dé-coloré si le bouton est survolé.</p>
</div>
</div>
Démo 4 : cas su-on-focus
Avec cette classe, il est possible d’utiliser SUTOGGLECLASS
lorsqu’un élément prend le focus, notamment grâce au clic sur un label lié à un input.
<style type="text/css">
.focus {
background: red !important;
}
</style>
<div class="demo4">
<label for="demo4">Label : cliquez sur ce libellé pour activer le TOGGLECLASS</label>
<input id="demo4" class="su-on-focus" name="input1" type="text" data-sutoggleclass='{"klass":"focus"}'>
</div>
Démo 5 : cas multiple classes
Il est possible de mettre / enlever plusieurs classes en même temps sur le même élément. Il suffit de mettre ces classes séparées par des espaces dans le paramètre klass
.
<div class="demo5">
<p class="su-margin-bottom-s">Cliquer sur le bouton ci-dessous supprime la classe <code>.su-primary</code> et ajoute la classe <code>.su-secondary</code>.</p>
<button class="su-button su-primary" data-sutoggleclass='{"klass":"su-primary su-secondary"}'>Cliquez</button>
</div>
Démo 6 : cas multiple toggles
Il est possible de mettre plusieurs SUTOGGLECLASS
sur un même déclencheur pour cibler différents éléments. Tout se met dans le même su-toggleclass
, séparé par une ,
.
<div class="demo6">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='[{"sel":".demo6 .p1","klass":"su-hidden"}, {"sel":".demo6 .p2","klass":"su-hidden"}]'>Multiples sutoggleclass au clic</button>
<div class="demo-target">
<p class="p1">P1 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
<p class="p2">P2 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
</div>
</div>
Démo 7 : cas force
Le paramètre force
permet de supprimer le principe « d’interrupteur » du TOGGLECLASS
: l’action sera ainsi toujours la même, soit elle force l’ajout de classe ("force":1
), soit elle force la suppression ("force":0
).
<div class="demo7">
<button class="su-button su-primary su-margin-bottom-s" data-sutoggleclass='{"sel":".demo7 p","klass":"su-hidden","force":1}'>Cliquez pour cacher</button>
<div class="demo-target">
<p>P1 Lorem ipsum Id magna velit sed et nostrud dolore tempor eiusmod commodo quis nisi aliquip reprehenderit veniam ex consequat nisi est.</p>
</div>
</div>