Composant Chip avec RiotJS

#riotjs #french #javascript #frontend

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

É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 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.