Cet article traite de la création d'un composant icône avec RiotJS, en utilisant le CSS Material Design BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base, ou lisez mes articles précédents de la série.
N'hésitez pas à consulter la documentation de RiotJS si nécessaire:https://riot.js.org/documentation/
Il existe trois types d'icônes sur BeerCSS : par défaut en utilisant les Glyphes Matériels de Google, en SVG, ou sous forme d'image (voir la capture d'écran suivante). L'objectif est de créer un composant d'icône Riot qui supporte les trois formats et écoute les événements de clic.
Base du Composant Icône
Tout d'abord, créez un nouveau fichier nommé c-icon.riot dans le dossier des composants. Lec- signifie "composant", une convention de nommage utile et une bonne pratique.
Dans./components/c-icon.riot, écrivez le code HTML suivant (trouvé dans la documentation BeerCSS) :
<c-icon><iclass=" { props?.tiny ? ' tiny' : null} { props?.small ? ' small' : null} { props?.large ? ' large' : null} { props?.extra ? ' extra' : null} { props?.fill ? ' fill' : null} { props?.primary ? ' primary-text' : null} { props?.secondary ? ' secondary-text' : null} { props?.tertiary ? ' tertiary-text' : null} "><slot></slot></i></c-icon>Analysons le code :
- Les balises
<c-icon>et</c-icon>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 les balises HTML natives est une mauvaise pratique, donc commencer parc-est un bon nommage. - En utilisant la balise
<slot>, vous pouvez injecter des modèles HTML personnalisés dans un composant enfant depuis son parent : maintenant, nous pouvons injecter soit une chaîne (pour une icône Google Material), une balise SVG, ou une balise image. - Une icône BeerCSS supporte différentes tailles et classes de thème : chaque classe est appliquée conditionnellement si laprop correspondante existe. Les propriétés sont définies sur le nom d'attribut HTML.
Enfin, le composantc-icon.riot peut être instancié dans une page d'accueilindex.riot:
<index-riot><divstyle="width:600px;padding:20px;"><h4style="margin-bottom:20px">Riot + BeerCSS</h4><c-icon>check_circle</c-icon><c-iconlarge="true"><svgviewBox="0 0 24 24"><pathd="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"></path></svg></c-icon><c-iconextra="true"><imgsrc="/favicon.png"></c-icon></div><script>importcIconfrom"./components/c-icon.riot";exportdefault{components:{cIcon}}</script></index-riot>Analysons le code :
- Le composant est importé avec
import cIcon from "./components/c-icon.riot";puis chargé dans l'objet Riotcomponents:{}. - Dans le HTML, le composant d'icône est instancié avec
<c-icon>nom_icône<c-icon>. - Puisque le composant utilise un slot, différents types d'icônes peuvent être passés : sous forme de SVG ou d'image.
- Si l'icône provient des polices Google Material Fonts, et si le nom de l'icône contient un espace, remplacez chaque espace par un underscore. Par exemple, si le nom sur Google Font est "Chevron Right", vous devez écrire dans le slot :
chevron_right.
Capture d'écran du HTML généré :
Pour appliquer différentes tailles et thèmes d'icônes, passez les attributs suivants à la définition de la balise du composant :tiny,small,large,extra,primary,secondary,tertiary, oufill, comme ceci:
<c-icontiny="true">check_circle</c-icon><c-iconsmall="true">check_circle</c-icon><c-icon>check_circle</c-icon><c-iconlarge="true">check_circle</c-icon><c-iconextra="true">check_circle</c-icon><c-iconextra="true"fill="true">check_circle</c-icon><c-iconextra="true"fill="true"primary="true">check_circle</c-icon><c-iconextra="true"fill="true"secondary="true">check_circle</c-icon><c-iconextra="true"fill="true"tertiary="true">check_circle</c-icon>Le HTML généré des variations d'icônes :
Test du Composant d'Icône
Il existe deux méthodes pour tester le composant d'icône, et elles sont couvertes dans deux articles différents :
Conclusion
Voilà 🎉 Nous avons créé un composant d'icône avec RiotJS en utilisant BeerCSS. Le code source de l'icône est disponible sur Github :https://github.com/steevepay/riot-beercss/blob/main/components/c-icon.riot
N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.
Passez une excellente journée ! Santé 🍻
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
