n'hésitez pas à vous référer à la documentation si nécessaire : https://riot.js.org/documentation/
Une Radio fait souvent partie d'un groupe de boutons Radio : Seul un bouton radio dans un groupe donné peut être sélectionné simultanément (voir la capture d'écran suivante). L'objectif est de créer un composant Radio avec le design BeerCSS et d'écouter les événements de changement.
Radio elements from the BeerCSS documentation
Remarque : L'article ne couvre pas la création d'une radio sous forme d'icône ou d'image.
Base du Composant Radio
Tout d'abord, créez un nouveau fichier nommé c-radio.riot dans le dossier des composants. Le c- signifie "composant", une convention de nommage utile et une bonne pratique.
Écrivez le code HTML suivant (CSS trouvé dans la documentation BeerCSS) dans ./components/c-radio.riot :
<c-radio >
<label class="radio">
<input type="radio" name={ props?.name } value={ props?.defaultValue } checked={ props?.defaultValue === props?.value } disabled={ props?.disabled }>
<span>
<slot></slot>
</span>
</label>
</c-radio>
Décomposons le code :
- Les balises
<c-radio> et </c-radio> définissent une balise racine personnalisée, portant le même nom que le fichier. Vous devez l'écrire ; sinon, cela pourrait créer des résultats inattendus. Utiliser la balise <label> comme balise racine ou redéfinir les balises HTML natives est une mauvaise pratique, donc commencer par c- est un bon nommage.
- Un attribut
name est requis pour chaque Radio : les Radios du même groupe doivent avoir le même name.
- La radio prend deux attributs de valeur différents :
- L'attribut
default-value définit la valeur de la radio.
- L'attribut
value définit la valeur du groupe.
- Pour activer l'attribut
checked, la value du groupe doit être égale à la valeur par défaut de la radio default-value.
- Une radio peut avoir une étiquette ; elle doit être passée en tant que Slot, une balise Riot pour injecter des modèles HTML dans un composant enfant depuis son parent.
- L'élément est désactivé si l'attribut
props.disabled existe et que la valeur est true.
Maintenant, pour créer un groupe de radios, créons un composant parent nommé ./components/c-radio-group.riot. Le HTML suivant a été copié depuis la documentation BeerCSS, et la logique RiotJS a été ajoutée:
<c-radio-group class="field middle-align">
<nav>
<slot></slot>
</nav>
<span class="helper" if={ props?.helper && !props?.error }>{ props.helper} </span>
<span class="error" if={ props?.error }>{ props.error}</span>
</c-radio-group>
- Pour définir plusieurs composants Radio dans le groupe, les Radios sont injectées grâce à la balise : la balise Slot est une fonctionnalité centrale spéciale de Riot.js qui vous permet d'injecter et de compiler le contenu de tout composant personnalisé.
- Le
span d'aide s'affiche si l'attribut helper existe.
- Si l'attribut
error existe, le span d'erreur s'affiche et l'aide est masquée.
Enfin, chargez et instanciez les fichiers c-radio.riot et c-radio-group.riot dans une page nommée index.riot:
<index-riot>
<div style="width:600px;padding:20px;">
<h4 style="margin-bottom:20px">Riot + BeerCSS</h4>
<c-radio-group oninput={ changed }>
<c-radio default-value="blue" value={ state.value } name="color">Blue</c-radio>
<c-radio default-value="red" value={ state.value } name="color">Red</c-radio>
<c-radio default-value="green" value={ state.value } onclick={ clicked } name="color">Green</c-radio>
</c-radio-group>
Selected: { state.value }
</div>
<script>
import cRadio from "./components/c-radio.riot";
import cRadioGroup from "./components/c-radio-group.riot"
export default {
components: {
cRadio,
cRadioGroup
},
state: {
value: "green"
},
changed (ev) {
this.update({ value: ev.target.value })
}
}
</script>
</index-riot>
Détails du code :
- Les composants sont importés avec
import cRadio from "./components/c-radio.riot"; et import cRadioGroup from "./components/c-radio-group.riot" puis chargés dans l'objet Riot components:{}.
- Le composant
RadioGroup est instancié avec <c-radio-group></c-radio-group> dans le HTML.
- Le composant
Radio est instancié au sein du groupe Radio en tant que Slot, comme : <c-radio-group><c-radio>label<c-radio></c-radio-group>.
- Chaque Radio obtient le même nom de groupe :
color.
- Chaque Radio obtient une valeur par défaut avec les attributs nommés
default-value: red, green et blue.
- L'état du groupe de radios est stocké dans l'objet RiotJS
state: { value: 'green' }. Vert est la valeur par défaut.
- Si un clic est effectué sur le groupe Radio, l'événement
change est déclenché, et la fonction changed est exécutée pour mettre à jour la valeur du groupe state.value.
- Pour mettre à jour un état, vous devez utiliser la fonction
update() de Riot, comme : this.update({ value: ev.target.value }). La state.value obtient la valeur de l'événement de changement de Radio.
Voici le HTML généré :
Image description
Test du Composant Radio
Il existe deux méthodes pour tester le composant Radio, et elles sont couvertes dans deux articles différents:
Conclusion
Voilà 🎉 Nous avons créé un composant Radio avec RiotJS en utilisant BeerCSS. Le code source de la radio est disponible sur Github:
https://github.com/steevepay/riot-beercss/blob/main/components/c-radio.riot
N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.
Passez une excellente journée ! Santé 🍻