WIDTH

Le composant WIDTH permet de définir la propriété CSS width en fonction de la somme de la largeur d’autres éléments. Cette propriété est ajoutée en ligne directement sur l’élément dans le DOM.

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 (sel, cf. ci-dessous) afin de connaître les éléments à mesurer. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suwidth 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 width. Ce qui donne : data-suwidth='{"paramètre":"valeur"}'.

Paramètres

• sel : permet de choisir la-les cible-s de la mesure, qui est enfant du déclencheur data-su
• mobileOnly : le composant ne s’exécute que sur un device de résolution mobile, inférieure à 768px (par défaut true)
• touchOnly : le composant ne s’exécute que sur un device avec un écran tactile (par défaut false)
• offset : ajoute un décalage à la détection (par défaut 0).

Exemples

Démo 0 : cas basique

Le composant est détecté (sans offset) dans le viewport. Si l’écran est de résolution mobile alors l’ul aura en propriété CSS width la somme des li enfants.

Pour tester son effet, passer l’iframe de démonstration ci-dessous en taille mobile et cliquez sur le bouton « Recharger ».

<style type="text/css">
    [class*='demo'] ul {
        border: 1px dashed red;
        display: inline-block;
        padding:  0;
        margin:  0;
    }
    [class*='demo'] li {
        border: 1px dashed blue;
        vwidth: 10px;
    }
</style>
<div class="demo0">
    <ul data-suwidth='{"sel":"li"}'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>
<button class="su-button su-primary su-small su-margin-top-m" onclick="window.location.reload()">Recharger</button>

Démo 1 : mobileOnly à false

Le composant est détecté (sans offset) dans le viewport. Si l’écran est de résolution mobile (inférieure à 768px) OU desktop alors l’ul aura en propriété CSS width la somme des li enfants.

Pour tester son effet, cliquez sur le bouton « Recharger » après un changement de taille.

<style type="text/css">
    [class*='demo'] ul {
        border: 1px dashed red;
        display: inline-block;
        padding:  0;
        margin:  0;
    }
    [class*='demo'] li {
        border: 1px dashed blue;
        vwidth: 10px;
    }
</style>
<div class="demo1">
    <ul data-suwidth='{"sel":"li","mobileOnly":false}'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>
<button class="su-button su-primary su-small su-margin-top-m" onclick="window.location.reload()">Recharger</button>

Démo 2 : touchOnly à true

Le composant est détecté (sans offset) dans le viewport. Si l’écran est de résolution mobile ET tactile alors l’ul aura en propriété CSS width la somme des li enfants.

Pour tester son effet, si vous êtes sur un ordinateur sans capacité tactile, émulez cette capacité avec les outils de développement et cliquez sur le bouton « Recharger ».

<style type="text/css">
    [class*='demo'] ul {
        border: 1px dashed red;
        display: inline-block;
        padding:  0;
        margin:  0;
    }
    [class*='demo'] li {
        border: 1px dashed blue;
        vwidth: 10px;
    }
</style>
<div class="demo2">
    <ul data-suwidth='{"sel":"li","touchOnly":true}'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>
<button class="su-button su-primary su-small su-margin-top-m" onclick="window.location.reload()">Recharger</button>