Composant Bouton avec RiotJS

Cet article traite de la création d'un composant de bouton Riot, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base en cours d'exécution, ou lisez mon article précédent Configurer Riot + BeerCSS + Vite.

BeerCSS propose de nombreux styles de boutons, tels que "large", "outlined", "fill" et bien d'autres (voir la capture d'écran suivante). L'objectif est de créer un composant de bouton qui supporte dynamiquement tous les styles et écoute les événements de clic.

Composant de Bouton de Base

Tout d'abord, créez un nouveau fichier nommé c-button.riot dans le dossier des composants. Le préfixe c- signifie "composant", une convention de nommage utile et une bonne pratique.

Dans ./components/c-button.riot, écrivez le code HTML et le code minimum pour un bouton:

<c-button>
    <button>
        <slot></slot>
    </button>
</c-button>

Décomposons le code :

• Les balises <c-button> et </c-button> 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 uniquement ou redéfinir des balises HTML natives est une mauvaise pratique, donc commencer par c- est un bon choix de nom.
• Pour imprimer un nom de bouton personnalisé, une fente <slot></slot> est utilisée : la balise <slot> est une fonctionnalité spéciale de Riot.js qui permet d'injecter et de compiler le contenu de tout composant personnalisé dans son modèle au moment de l'exécution.

Ensuite, nous pouvons charger et instancier le composant c-button.riot dans une page d'accueil index.riot:

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>

        <c-button onclick={ clicked }>Home</c-button>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            clicked () {
                console.log("clicked");
            }
        }
    </script>
</index-riot>

Décomposition du code :

• Le composant est importé avec import cButton from "../components/c-button.riot" puis chargé dans l'objet Riot components:{}.
• Dans le HTML, le composant de bouton est instancié avec <c-button onclick={ clicked }>Accueil</c-button>.
• L'événement click est écouté grâce à l'attribut onclick : lorsque l'événement est déclenché, la fonction clicked est exécutée.

Capture d'écran du HTML généré avec le bouton personnalisé :

Avec le bouton le plus simple, nous pouvons créer un compteur. Une valeur est augmentée ou diminuée en fonction du clic sur le bouton. Voici le HTML et le JavaScript dans le fichier index.riot :

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>

        <c-button onclick={ add }>Add</c-button-test>
        <c-button>{state.number}</c-button-test>
        <c-button onclick={ sub }>Sub</c-button-test>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            state: {
                number: 0
            },
            add () {
                this.update({ number: this.state.number + 1 })
            },
            sub () {
                this.update({ number: this.state.number - 1 })
            }
        }
    </script>
</index-riot>

Décomposition du code :

1. Pour stocker la valeur du nombre, elle doit être déclarée dans l'objet state: {}.
2. Si le bouton Ajouter est cliqué, il exécutera la fonction add() pour ajouter un au nombre.
3. Si le bouton Soustraire est cliqué, il exécutera la fonction sub() pour soustraire un au nombre.

Voici le HTML généré du petit compteur :

Il n'est pas nécessaire de créer des fonctions add et sub ; le comptage peut être simplifié en une ligne pour chaque bouton avec onclick={ () => update({ number: state.number + 1 }) }. Le code pour index.riot :

<index-riot>
    <div style="width:600px;padding:20px;">
        <h4 style="margin-bottom:20px">Riot + BeerCSS</h4>
        <c-button onclick={ () => update({ number: state.number + 1 }) }>Add</c-button-test>
        <c-button >{state.number}</c-button-test>
        <c-button onclick={ () => update({number: state.number - 1}) }>Sub</c-button-test>
    </div>
    <script>
        import cButton from "./components/c-button.riot";

        export default {
            components: {
                cButton
            },
            state: {
                number: 0
            }
        }
    </script>
</index-riot>

Styles du Composant de Bouton

Ajoutons une icône personnalisée au fichier c-button.riot :

<c-button>
    <button>
        <i if={ props?.icon }> {props.icon} </i>
        <slot></slot>
    </button>
</c-button>

Si la propriété icon existe (attribut HTML), la balise <i> sera affichée avec le symbole de l'icône.

BeerCSS supporte les polices Material par défaut, voici la liste de toutes les icônes : https://fonts.google.com/

Essayons l'icône en définissant l'attribut "icon" avec un nom de symbole dans notre fichier index.riot, comme suit :

<c-button-test icon="add" onclick={ add }>Add</c-button-test>
<c-button-test>{state.number}</c-button-test>
<c-button-test icon="remove" onclick={ sub }>Sub</c-button-test>

Le HTML généré affiche les symboles "Add" et "Remove" :

Pour créer des variations de couleurs, nous pouvons ajouter des classes en fonction de conditions : la condition suivante vérifie si props.primary, props.secondary ou props.tertiary existe, puis ajoute les classes "primary", "secondary" ou "tertiary" respectivement.

<c-button>
    <button class="
            { props?.primary ? " primary" : null }
            { props?.secondary ? " secondary" : null }
            { props?.tertiary ? " tertiary" : null }
        ">
        <i if={ props?.icon }> {props.icon} </i>
        <slot></slot>
    </button>
</c-button>

Maintenant, nous pouvons essayer chaque attribut de couleur dans index.riot :

<c-button-test primary="true" icon="add" onclick={ add }>Add</c-button-test>
<c-button-test secondary="true">{state.number}</c-button-test>
<c-button-test tertiary="true" icon="remove" onclick={ sub }>Sub</c-button-test>

Le HTML généré affiche trois variations de couleurs :

La logique est la même pour supporter les +30 variations (carré, cercle, ombre, élévation, etc.): appliquer une classe si l'attribut existe.

Le résultat des variations mélangées du bouton avec Riot et BeerCSS :

Le code du composant de bouton est disponible sur GitHub :
https://github.com/steevepay/riot-beercss/blob/main/components/c-button.riot

Tests du Composant de Bouton

Il existe deux méthodes pour tester le composant de bouton, 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à 🎉 Nous avons créé un composant de bouton Riot en utilisant des éléments Material Design avec BeerCSS.

N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.

Passez une excellente journée ! Santé 🍻