Les boutons radio permettent aux utilisateurs de sélectionner une seule option parmi un ensemble de choix mutuellement exclusifs.Ils sont particulièrement adaptés aux formulaires où une décision unique doit être prise.
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-radio dans votre projet.
Étape 1
Installez le composant ip-radio en tant que dépendance dans votre projet :
npm install ip-radio
É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 |
|---|
| options | options | Requise | Chaîne JSON contenant la liste des options radio. | string | Non défini |
| labelPosition | label-position | Optionnel | Définit la position du libellé par rapport au bouton radio. | before | after | after |
| defaultOptionId | default-option-id | Optionnel | ID de l’option sélectionnée par défaut, si nécessaire. | string | nombre | Non défini |
Options
Il s’agit d’un tableau JSON sérialisé représentant la liste des options.Chaque option est un objet contenant un id, un label, et éventuellement une propriété disabled.
- id: identifiant unique de l’input radio.
- label: texte affiché pour l’option radio.
- disabled: permet de désactiver l’option (valeur booléenne, false par défaut).
Exemple
Personnalisation
Les éléments sont encapsulés dans un fieldset.
Nous disposons d’un ensemble de variables prédéfinies permettant de personnaliser la case d’option (radio) :
- --primary-color
- --secondary-color
- --radio-size
- --fieldset-border
Pour mettre à jour ces valeurs, utilisez le code suivant :
Écoute des événements
- Cet événement est émis lorsqu’un bouton radio est sélectionné. Le détail de l’événement correspond à l’option sélectionnée.
Exemple
