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.
Chips example from the material.io documentation
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 par c- 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
- 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 Riot components:{}.
- 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é :
Variations of the chip Component made with RiotJS and BeerCSS
É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é.
Chip group listening to click events
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 fonction clicked 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 et icon.
Tests du Composant Chip
Il existe deux méthodes pour tester le composant Chip, et elles sont couvertes dans deux articles différents :
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é 🍻