Framework HAL

Appearance

Référence des Directives ​

Voici la liste des directives disponibles dans le framework HAL, regroupées par fonctionnalité.

Gestion des Classes CSS ​

Ces directives permettent de manipuler les classes CSS des éléments.

add-class ​

Ajoute une classe CSS à un élément.

  • Valeur : Le nom de la classe à ajouter.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de l'élément cible. Par défaut, l'élément lui-même.

Exemple :

html
<div @add-class="active">Activer</div>
<div @add-class="visible" @add-class.target=".modal">Afficher Modal</div>

remove-class ​

Supprime une classe CSS d'un élément.

  • Valeur : Le nom de la classe à supprimer.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de l'élément cible.

Exemple :

html
<button @remove-class="hidden" @remove-class.target=".popup">Afficher</button>

toggle-class ​

Bascule (ajoute/supprime) une classe CSS sur un élément.

  • Valeur : Le nom de la classe à basculer.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de l'élément cible.

Exemple :

html
<button @toggle-class="open" @toggle-class.target="#menu">Menu</button>

Gestion des Attributs ​

Ces directives permettent de manipuler les attributs HTML.

add-attribute ​

Ajoute un attribut à un élément.

  • Valeur : Le nom de l'attribut à ajouter.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de l'élément cible.
    • value (optionnel) : La valeur de l'attribut. Par défaut, chaîne vide.

Exemple :

html
<button @add-attribute="checked">Cocher</button>
<button @add-attribute="aria-expanded" @add-attribute.target="#menu" @add-attribute.value="true">Ouvrir</button>

remove-attribute ​

Supprime un attribut d'un élément.

  • Valeur : Le nom de l'attribut à supprimer.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de l'élément cible.

Exemple :

html
<button @remove-attribute="disabled">Activer</button>

update-attribute ​

Met à jour la valeur d'un attribut existant.

  • Valeur : Le nom de l'attribut.
  • Paramètres :
    • target (optionnel) : Sélecteur CSS de la cible.
    • value (optionnel) : La nouvelle valeur.

Exemple :

html
<button @update-attribute="src" @update-attribute.target="#main-image" @update-attribute.value="image2.jpg">
  Changer Image
</button>

Interactions Shopify (Panier) ​

Ces directives interagissent directement avec l'API du panier Shopify.

add-variant-to-cart ​

Ajoute un variant produit au panier.

  • Valeur : L'ID du variant.
  • Paramètres :
    • quantity (optionnel) : Quantité à ajouter (défaut: 1).
    • properties (optionnel) : Propriétés de ligne au format JSON.

Exemple :

html
<button @add-variant-to-cart="123456789" @add-variant-to-cart.quantity="2">Ajouter au panier</button>

update-cart-quantity ​

Met à jour la quantité d'un article dans le panier.

  • Valeur : La nouvelle quantité.
  • Paramètres :
    • key : La clé de l'article dans le panier.

Exemple :

html
<button @update-cart-quantity="0" @update-cart-quantity.key="{{ item.key }}">Supprimer</button>

Interface Utilisateur (UI) ​

toggle-drawer, open-drawer, close-drawer ​

Contrôle l'ouverture et la fermeture des composants h-drawer.

  • Valeur : Sélecteur CSS du drawer cible.

Exemple :

html
<button @toggle-drawer="#cart-drawer">Panier</button>

focus-input ​

Donne le focus à un champ de saisie.

  • Valeur : Sélecteur CSS de l'input à cibler.

Exemple :

html
<button @focus-input="#search-input">Rechercher</button>

Utilitaires ​

prevent-default ​

Empêche le comportement par défaut de l'événement.

Exemple :

html
<a href="#" @prevent-default>Lien inactif</a>

console ​

Affiche un message dans la console.

Exemple :

html
<button @console="Test">Log</button>