x-show

x-show est l'une des directives les plus utiles et les plus puissantes d'Alpine. Elle offre un moyen expressif d'afficher et de masquer des éléments du DOM.

Voici un exemple de composant de menu déroulant simple utilisant x-show.

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Afficher/masquer le menu</button>

    <div x-show="open">
        Contenu du menu...
    </div>
</div>

Lorsque vous cliquez sur le bouton « Afficher/masquer le menu », le menu s'affiche et se masque en conséquence.

Remarque : si l'état « par défaut » d'un x-show au chargement de la page est « false », vous voudrez peut-être utiliser x-cloak sur la page pour éviter le « clignotement » (l'effet qui se produit quand le navigateur affiche votre contenu avant qu'Alpine ait fini de s'initialiser et de le masquer). Vous pouvez en apprendre davantage sur x-cloak dans sa documentation.

Avec des transitions

Si vous souhaitez appliquer des transitions fluides au comportement de x-show, vous pouvez l'utiliser avec x-transition. Vous en apprendrez plus sur cette directive ici, mais voici un exemple rapide du même composant que ci-dessus, avec des transitions.

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Afficher/masquer le menu</button>

    <div x-show="open" x-transition>
        Contenu du menu...
    </div>
</div>

Utiliser le modificateur important

Il arrive que vous deviez forcer un peu plus pour masquer réellement un élément. Lorsqu'un sélecteur CSS applique la propriété display avec l'indicateur !important, celle-ci prend le dessus sur le style en ligne défini par Alpine.

Dans ces cas, vous pouvez utiliser le modificateur .important pour définir le style en ligne à display: none !important.

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Afficher/masquer le menu</button>

    <div x-show.important="open">
        Contenu du menu...
    </div>
</div>

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev