COMPOSANTS
Case à cocher Simple
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 couramment utilisées dans les formulaires et les paramètres pour permettre aux utilisateurs d’indiquer leurs choix ou préférences. Elles sont particulièrement utiles 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 dans votre projet.
Étape 1
Installez le composant ip-checkbox en tant que dépendance dans votre projet :
npm install ip-checkboxÉ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 |
|---|---|---|---|---|---|
id | id | Requise | L'identifiant du champ pour l’accessibilité. | string | Non défini |
name | name | Requise | Le nom 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 |
Contenu
Un emplacement (slot) de libellé prédéfini est disponible pour afficher le texte du label avant la case à cocher. Le contenu placé dans ce slot sera rendu à l’intérieur de la balise du composant.
Exemple
Personnalisation
Un ensemble de variables prédéfinies permet de personnaliser la case à cocher :
--primary-color--secondary-color--font-size--checkbox-size
Pour modifier ces valeurs, utilisez le code CSS suivant :
Listening to Events
Pour écouter les événements émis par les composants ip-checkbox et ip-checkbox-list, ouvrez la console de votre navigateur. Les détails des événements s’afficheront automatiquement lorsque les cases seront modifiées.
Exemple de code Javascript: