Dev.to

Composant Chip avec RiotJS

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): { props.icon } { props.iconend } Expliquons le code : 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. 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. 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 : Riot + BeerCSS Chip Variations Suggestion Input filter assist image image Suggestion Input filter assist image image Suggestion Input filter assist image image Suggestion Input filter assist image 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é : É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: Amenities 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 ch

Apr 21, 2025 - 13:23
 0
Composant Chip avec RiotJS

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

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 }