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.
Image description
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.
GIF of a Stepper made with RiotJS and BeerCSS
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 :
- 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 }.
- L'état du Stepper est stocké dans un objet Riot
state:{} sous la valeur state.active.
-
state.active affichera les pages 1, 2 ou 3 avec l'expression <div class="page padding" if={ state.active === 1 }>.
- 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 :
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é 🍻