Composant Stepper avec RiotJS

Cet article traite de la création d'un composant Stepper (étapes) avec RiotJS, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application Riot, ou lisez mes articles précédents.

Je suppose que vous avez une compréhension fondamentale de Riot ; cependant, n'hésitez pas à vous référer à la documentation si nécessaire : https://riot.js.org/documentation/

Les steppers, ou "étapes" en Français, affichent la progression à travers un processus multi-étapes. Les utilisateurs savent intuitivement où ils en sont dans le processus et combien d'étapes restent, par exemple, un flux de paiement, une connexion ou un formulaire.

Base du composant Stepper

L'objectif est de créer une application Riot avec un Stepper qui montre une progression lorsqu'un bouton est cliqué et affiche la page correspondante.

Ouvrez le fichier index.riot à la racine de votre projet Vite, puis ajoutez le code suivant. Le HTML provient de la documentation BeerCSS et j'ai ajouté la syntaxe RiotJS pour la logique :

<index-riot>
    <div style="width:800px;padding:20px;">
        <nav class="scroll">
            <button class="circle small"  onclick={ () => changeStep(1)}>
                <template if={ state.active === 1 }>1</template>
                <i if={ state.active > 1}>done</i>
            </button>
            <div class="max divider"></div>
            <button class="circle small" disabled={ state.active < 2 } onclick={ () => changeStep(2)}>
                <template if={ state.active <= 2 }>2</template>
                <i if={ state.active > 2}>done</i>
            </button>
            <div class="max divider"></div>
            <button class="circle small" disabled={ state.active < 3 } onclick={ () => changeStep(3)}>
                <template if={ state.active <= 3 }>3</template>
                <i if={ state.active > 3}>done</i>
            </button>
        </nav>
        <br>
        <div class="page padding { state.active === 1 ? 'active' : null}" if={ state.active === 1 }>
            <h5>Page { state.active }</h5><br>
            <button onclick={ () => { changeStep(2) }}>Next</button>
        </div>
        <div class="page padding { state.active === 2 ? 'active' : null}" if={ state.active === 2 }>
            <h5>Page { state.active }</h5><br>
            <button onclick={ () => { changeStep(3) }}>Next</button>
        </div>
        <div class="page padding { state.active === 3 ? 'active' : null}" if={ state.active === 3 }>
            <h5>Page { state.active }</h5><br>
            <button onclick={ () => { changeStep(4) }}>Next</button>
        </div>
        <div class="page padding { state.active === 4 ? 'active' : null}" if={ state.active === 4 }>
            <h5>Done!</h5>
        </div>
    </div>
    <script>
        export default {
            state: {
                active: 1,
            },
            changeStep(value) {
                this.update({
                    active: value
                })
            }
        }
    </script>
</index-riot>

Code Source: https://github.com/steevepay/riot-beercss/blob/main/examples/index.stepper.riot

Décomposons le code :

1. Le Stepper est composé de boutons et de séparateurs, l'état d'une étape est défini par :
   • Complété : lorsque l'icône de validation est affichée et que le numéro est masqué avec <template if={ state.active === 1 }>1</template>.
   • En cours de complétion : lorsque le numéro est affiché et que l'icône de validation est masquée avec <i if={ state.active > 1}>done</i>.
   • Étape suivante à venir : lorsque le bouton est désactivé avec la condition disabled={ state.active < 2 }.
2. L'état du Stepper est stocké dans un objet Riot state:{} sous la valeur state.active.
3. state.active affichera les pages 1, 2 ou 3 avec l'expression <div class="page padding" if={ state.active === 1 }>.
4. Si l'un des boutons d'étape est cliqué, il mettra à jour directement state.active avec le numéro de l'étape sélectionnée : La fonction changeStep est déclenchée lorsque l'événement "Click" est capturé, comme : onclick={ () => changeStep(1)}. Changer l'étape peut être utilisé pour requêter une API et/ou charger ensuite une page spécifique.

Test du composant Stepper

Il existe deux méthodes pour tester le composant Stepper, 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 Stepper Riot en utilisant des éléments Material Design avec BeerCSS. N'hésitez pas à commenter si vous avez des questions ou besoin d'aide avec RiotJS.

Passez une excellente journée ! Santé 🍻