VWIDTH

Le composant VWIDTH permet de définir les propriétés CSS width et min-width en fonction de la largeur du viewport. Ces propriétés sont ajoutées en ligne directement sur l’élément dans le DOM.

Ce script ne se déclenche qu’au chargement de la page, il n’a donc aucun effet après un redimensionnement.

Syntaxe

Comme tout déclencheur JS de SipaUI il est préfixé par data-su. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suvwidth 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 vwidth. Ce qui donne : data-suvwidth='{"paramètre":"valeur"}'.

Paramètres

• mobileOnly : le composant ne s’exécute que sur un device de résolution mobile, inférieure à 1024px (par défaut true)
• touchOnly : le composant ne s’exécute que sur un device avec un écran tactile (par défaut false)

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 et min-width la largeur du viewport.

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-suvwidth>
        <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 à 1024px) OU desktop alors l’ul aura en propriété CSS width et min-width la largeur du viewport.

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-suvwidth='{"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 et min-width la largeur du viewport.

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-suvwidth='{"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>