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.

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):

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 }
        ">
         if={ props?.icon }>{ props.icon }
         class={props?.inline ? null : "responsive" } if={ props?.img } src={ props.img }>
        
         if={ props?.iconend }>{ props.iconend }

Expliquons le code :

  1. Les balises et 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 comme balise racine ou redéfinir des balises HTML natives est une mauvaise pratique, donc commencer par c- est un bon choix de nom.
  2. En utilisant la balise , vous pouvez injecter des modèles HTML personnalisés dans un composant enfant depuis son parent : nous allons injecter l'étiquette du chip.
  3. 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.
  4. 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
  5. 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 :

style="width:800px;padding:20px;">
         style="margin-bottom:20px;margin-left:10px;">Riot + BeerCSS
         style="margin-left:10px">Chip Variations
        Suggestion
         iconend="close">Input
         icon="check">filter
         icon="today">assist
         img="./favicon.png" inline="true">image
         img="./favicon.png">image
        
         round="true">Suggestion
         round="true" iconend="close">Input
         round="true" icon="check">filter
         round="true" icon="today">assist
         round="true" img="./favicon.png" inline="true">image
         round="true" img="./favicon.png">image
        
         fill="true">Suggestion
         fill="true" iconend="close">Input
         fill="true" icon="check">filter
         fill="true" icon="today">assist
         fill="true" img="./favicon.png" inline="true">image
         fill="true" img="./favicon.png">image
         fill="true" round="true">Suggestion
         fill="true" round="true" iconend="close">Input
         fill="true" round="true" icon="check">filter
         fill="true" round="true" icon="today">assist
         fill="true" round="true" img="./favicon.png" inline="true">image
         fill="true" round="true" img="./favicon.png">image
    
    
        import cChip from "./components/c-chip.riot"

        export default {
            components: {
                cChip
            },
        }

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 label.
  • Passez des attributs à la balise pour activer les variations, par exemple : filter.

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:

style="width:800px;padding:20px;">
         style="margin-left:10px">Amenities
         each={ el in state.amenities } onclick={ (ev) => clicked(el.label) } fill={ el.checked === true } icon={ el.checked === true ? 'check' : null }> { el.label } 
    
    
        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();
                }
            }
        }

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é 🍻