Cet article traite de la création d'un composant Chip avec RiotJS, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base RiotJS, ou consultez mes articles précédents.
Je suppose que vous avez une compréhension de base de Riot ; cependant, n'hésitez pas à consulter la documentation si nécessaire : https://riot.js.org/documentation/
Les Chips aident les gens à entrer des informations, à faire des sélections, à filtrer du contenu ou à déclencher des actions (voir la capture d'écran suivante). L'objectif est de créer un composant Chip qui prend en charge tous les styles de BeerCSS et écoute les événements de clic.
Base du Composant Chip
Tout d'abord, créez un nouveau fichier nommé c-chip.riot dans le dossier des composants. Le préfixe c-
signifie "composant", une convention de nommage utile et une bonne pratique.
Dans ./components/c-chip.riot, écrivez le code HTML suivant (CSS trouvé dans la documentation BeerCSS):
<c-chip>
<a class="
chip
{props?.small ? 'small' : null }
{props?.medium ? 'medium' : null }
{props?.large ? 'large' : null }
{props?.smallElevate ? 'small-elevate' : null}
{props?.mediumElevate ? 'medium-elevate' : null}
{props?.largeElevate ? 'large-elevate' : null}
{props?.round ? 'round' : null }
{props?.fill ? 'fill' : null }
{props?.vertical ? 'vertical' : null }
">
<i if={ props?.icon }>{ props.icon }</i>
<img class={props?.inline ? null : "responsive" } if={ props?.img } src={ props.img }>
<span><slot></slot></span>
<i if={ props?.iconend }>{ props.iconend }</i>
</a>
</c-chip>
Expliquons le code :
- Les balises
<c-chip>
et</c-chip>
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<a>
comme balise racine ou redéfinir des balises HTML natives est une mauvaise pratique, donc commencer parc-
est un bon choix de nom. - En utilisant la balise
<slot>
, vous pouvez injecter des modèles HTML personnalisés dans un composant enfant depuis son parent : nous allons injecter l'étiquette du chip. - Un chip a de nombreuses classes de variations : taille, élévation et forme (rond, rempli ou vertical). Elles sont injectées conditionnellement si les propriétés correspondantes existent. Par exemple, si la propriété
props.round
existe, elle activera la classe round dans le composant. - Deux icônes peuvent être passées à deux positions : soit comme préfixe, soit comme suffixe du label:
- la propriété
icon
injecte le glyphe avant l'étiquette - la propriété
iconend
injecte le glyphe après l'étiquette
- la propriété
- Grâce à la propriété img, une image peut être injectée à la place d'une icône.
Enfin, le composant c-chip.riot peut être instancié dans une page index.riot. Voici toutes les variations de Chip, qu'elles soient remplies, arrondies, incluant une image ou une icône :
<index-riot>
<div style="width:800px;padding:20px;">
<h4 style="margin-bottom:20px;margin-left:10px;">Riot + BeerCSS</h4>
<h6 style="margin-left:10px">Chip Variations</h6><br>
<c-chip>Suggestion</c-chip>
<c-chip iconend="close">Input</c-chip>
<c-chip icon="check">filter</c-chip>
<c-chip icon="today">assist</c-chip>
<c-chip img="./favicon.png" inline="true">image</c-chip>
<c-chip img="./favicon.png">image</c-chip>
<br><br>
<c-chip round="true">Suggestion</c-chip>
<c-chip round="true" iconend="close">Input</c-chip>
<c-chip round="true" icon="check">filter</c-chip>
<c-chip round="true" icon="today">assist</c-chip>
<c-chip round="true" img="./favicon.png" inline="true">image</c-chip>
<c-chip round="true" img="./favicon.png">image</c-chip>
<br><br>
<c-chip fill="true">Suggestion</c-chip>
<c-chip fill="true" iconend="close">Input</c-chip>
<c-chip fill="true" icon="check">filter</c-chip>
<c-chip fill="true" icon="today">assist</c-chip>
<c-chip fill="true" img="./favicon.png" inline="true">image</c-chip>
<c-chip fill="true" img="./favicon.png">image</c-chip><br><br>
<c-chip fill="true" round="true">Suggestion</c-chip>
<c-chip fill="true" round="true" iconend="close">Input</c-chip>
<c-chip fill="true" round="true" icon="check">filter</c-chip>
<c-chip fill="true" round="true" icon="today">assist</c-chip>
<c-chip fill="true" round="true" img="./favicon.png" inline="true">image</c-chip>
<c-chip fill="true" round="true" img="./favicon.png">image</c-chip>
</div>
<script>
import cChip from "./components/c-chip.riot"
export default {
components: {
cChip
},
}
</script>
</index-riot>
Explication du code :
- Le composant est importé avec
import cChip from "./components/c-chip.riot";
puis chargé dans l'objet Riotcomponents:{}
. - Dans le HTML, le composant Chip est instancié avec
<c-chip>label<c-chip>
. - Passez des attributs à la balise pour activer les variations, par exemple :
<c-chip fill="true" round="true" icon="check">filter</c-chip>
.
Capture d'écran du HTML généré :
Événements du Composant Chip
Comme mentionné, un Chip est utilisé pour filtrer, suggérer et déclencher des actions. Un exemple concret serait que vous devez sélectionner les commodités de votre appartement pour une demande de location.
Créons un groupe de chips pour chaque commodité et vérifions s'il est sélectionné.
Voici le code Riot correspondant dans index.riot:
<index-riot>
<div style="width:800px;padding:20px;">
<h6 style="margin-left:10px">Amenities</h6><br>
<c-chip each={ el in state.amenities } onclick={ (ev) => clicked(el.label) } fill={ el.checked === true } icon={ el.checked === true ? 'check' : null }> { el.label } </c-chip>
</div>
<script>
import cChip from "./components/c-chip.riot"
export default {
components: {
cChip
},
state: {
amenities: [
{ label: "Wash / Dryer", checked: false },
{ label: "Ramp Access", checked: false },
{ label: "Garden", checked: false },
{ label: "Cat OK", checked: false }
]
},
clicked (label) {
const _el = this.state.amenities.find(el => el.label === label);
if (_el) {
_el.checked = !_el.checked;
this.update();
}
}
}
</script>
</index-riot>
Détails du code :
- Une liste de Chips est imprimée grâce à l'attribut Each de Riot.
- Chaque chip écoute un événement de clic avec
onclick={ (ev) => clicked(el.label) }
. Si un événement de clic est déclenché, la fonctionclicked
est exécutée, et le label est passée comme premier argument. - La fonction
clicked
trouve l'élément de la liste en fonction de l'étiquette, puis la propriétéchecked
est mise à jour. - Lorsque
checked
est vrai (true), deux attributs sont activés :fill
eticon
.
Tests du Composant Chip
Il existe deux méthodes pour tester le composant Chip, 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à 🎉 Nous avons créé un composant Chip Riot en utilisant des éléments Material Design avec BeerCSS.
Le code source du chip est disponible sur Github : https://github.com/steevepay/riot-beercss/blob/main/components/c-chip.riot
N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.
Bonne journée ! Santé 🍻
Top comments (0)