COMPOSANTS
Liste de Case à cocher
Une case à cocher est un composant qui permet aux utilisateurs de sélectionner une ou plusieurs options dans un ensemble. Généralement présentée sous la forme d’un petit carré, elle peut être cochée (sélectionnée) ou décochée (non sélectionnée). Les cases à cocher sont souvent utilisées dans des formulaires ou des paramètres pour permettre aux utilisateurs d’exprimer leurs choix ou préférences. Elles sont particulièrement adaptées lorsque les options ne sont pas exclusives, car elles autorisent plusieurs sélections au sein d’un même groupe. Lorsqu’une case est cochée, un symbole de validation apparaît à l’intérieur du carré, indiquant visuellement la sélection de l’utilisateur.
Demo
Code
Documentation
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-checkbox-list dans votre projet.
Étape 1
Installez le composant ip-checkbox-list en tant que dépendance dans votre projet :
npm install ip-checkbox-listÉtape 2
Importez le module dans votre fichier script :
Usage
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 |
|---|---|---|---|---|---|
options | options | Requise | Un tableau d’objets utilisés pour passer des options comme cases à cocher | string | Non défini |
id | id | Requise | L'identifiant du champ pour l’accessibilité. | string | Non défini |
defaultChecked | default-checked | Optionnel | Définit la case comme cochée par défaut. | boolean | false |
disabled | disabled | Optionnel | Désactive la case à cocher, empêchant toute interaction. | boolean | false |
legend | legend | Optionnel | La légende de la liste de cases à cocher. | string | Non défini |
Exemple:
Personnalisation
Un ensemble de variables prédéfinies permet de personnaliser la case à cocher :
--primary-color--secondary-color--font-size--checkbox-size
Événement
Pour écouter les événements émis par le composant ip-checkbox-list, ouvrez la console de votre navigateur. Les détails des événements s’afficheront lorsque les cases à cocher seront modifiées.
Exemple de code Javascript