Composant Radio avec RiotJS

Cet article traite la création d'un composant Radio avec RiotJS en utilisant BeerCSS. Avant de commencer, assurez-vous d'avoir une application Riot, ou lisez mes articles précédents. 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. 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 : Décomposons le code : Les balises et 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 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: { props.helper} { props.error} 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: Riot + BeerCSS Blue Red Green Selected: { state.value } 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 }) } } 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 dans le HTML. Le composant Radio est instancié au sein du groupe Radio en tant que Slot, comme : label. 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é : Test du Composant Radio Il existe deux méthodes pour tester le composant Radio, et elles sont couvertes dans deux articles différents: Test avec Vitest et Riot-SSR dans un environnement Node Test avec Vitest dans un environnement JsDom Conclusion Voilà

Mar 31, 2025 - 13:17

Cet article traite la création d'un composant Radio avec RiotJS en utilisant BeerCSS. Avant de commencer, assurez-vous d'avoir une application Riot, ou lisez mes articles précédents.

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.

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 :

 >
     class="radio">
         type="radio" name={ props?.name } value={ props?.defaultValue } checked={ props?.defaultValue === props?.value } disabled={ props?.disabled }>

Décomposons le code :

Les balises et 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 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:

 class="field middle-align">
    
        
    
     class="helper" if={ props?.helper && !props?.error }>{ props.helper} 
     class="error" if={ props?.error }>{ props.error}

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:


     style="width:600px;padding:20px;">
         style="margin-bottom:20px">Riot + BeerCSS
         oninput={ changed }>
             default-value="blue" value={ state.value } name="color">Blue
             default-value="red" value={ state.value } name="color">Red
             default-value="green" value={ state.value } onclick={ clicked } name="color">Green
        
        Selected: { state.value }

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 dans le HTML.
Le composant Radio est instancié au sein du groupe Radio en tant que Slot, comme : label.
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é :

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à