COMPOSANTS
Bouton à bascule simple
Utilisé dans les interfaces numériques pour activer ou désactiver un paramètre unique. Ressemblant à un interrupteur physique, il offre un repère visuel clair de son état, ce qui le rend très intuitif pour les utilisateurs. Les boutons à bascule sont couramment utilisés pour des réglages binaires — activer ou désactiver une option — dans les applications et sites web. Ils constituent une alternative plus simple et plus immédiate que les cases à cocher lorsqu’il s’agit de modifier un seul paramètre en un seul geste.
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-toggle dans votre projet.
Étape 1
Installez le composant ip-toggle en tant que dépendance dans votre projet :
npm install ip-toggle
Étape 2
Importez le module dans votre fichier script :
Utilisation
Pour utiliser ce composant, ajoutez les propriétés sous forme d’attributs.
Propriétés
| Propriété | Attribut | Nécessité | Description | Type | Valeur par défaut |
|---|
| ariaLabel | aria-label | Requise | Libellé ARIA du contenu pour l’accessibilité. | string | Non défini |
| checked | checked | Optionnel | État initial de l’interrupteur. | boolean | False |
| activeLabel | active-label | Optionnel | Texte affiché lorsque l’interrupteur est actif. | string | Non défini |
| inactiveLabel | inactive-label | Optionnel | Texte affiché lorsque l’interrupteur est inactif. | string | Non défini |
| toggleDisabled | toggle-disabled | Optionnel | Définit si l’interrupteur est désactivé. | boolean | False |
| size | size | Optionnel | Trois tailles prédéfinies sont disponibles : large, medium, small. | string | medium |
Contenu
Un slot prédéfini est disponible pour ajouter un libellé avant l’interrupteur si nécessaire :
slot="switch-label": ce texte descriptif informe l’utilisateur sur la fonction de l’interrupteur.
Personnalisation
Nous disposons d’un ensemble de variables prédéfinies permettant de personnaliser le bouton à bascule :
--primary-color--secondary-color--font-family--text-color
Pour mettre à jour ces valeurs, utilisez le CSS suivant :
Écoute des événements
toggleChange: cet événement est émis lorsque l’état du toggle change. Le détail de l’événement correspond à la valeur de checked (activé ou désactivé).
Exemple
