IONIC Section 4 - 4.10 Ajout d'icônes et utilisation de slots

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, notre application commence à prendre forme et à un style assez joli sans même avoir écrit une seule ligne de CSS grâce à ces beaux styles apportés par Ionic. Cela permet de nous donner des idées, comme composer une interface utilisateur riche avec une apparence attrayante et, comme vous le verrez, des components assez puissant et riche en fonctionnalités avec peu d’effort. Il est vrai que j’ai beaucoup expliqué, mais en termes de code, nous n’avons pas écrit autant de code et nous avons uniquement travaillé en HTML. Donc nous avons notre card avec les 2 éléments distincts « header » et « content », maintenant, je veux aussi avoir un bouton pour soumettre mes entrées ici. Donc en dessous de « ion-item » je vais insérer notre « ion-button », je vais ajouter du texte dessus en indiquant « Ajout de dépenses » et je vais le dupliquer pour obtenir un bouton « effacer ». Qui sera en première position. Donc si on recharge notre application, on peut apercevoir nos 2 boutons, en soit ils sont très visuel, mais on peut donner un aspect différent. Par exemple, je souhaite que mon bouton « effacer », ait une couleur rouge et un aspect souligné, où il n’y a pas de couleur d’arrière-plan, mais seulement une bordure et une couleur de texte, et je souhaite également avoir une icône qui signale que cela annule l’entrée et efface les champs. Et sur le bouton des dépenses, je souhaite aussi une icône avec un symbole « + », en laissant un style tel quel. Donc dans un premier temps, on va s’occuper du bouton « effacer », nous pouvons définir le mode de remplissage avec l’attribut « fill »,. Bien sûr, vous pouvez trouver d’autres alternatives plus personnalisables en fonction de vos goûts dans la documentation, dans cet exemple, je vous démontre un style assez standard. Donc je vais avoir fill=« outline » et en ce qui concerne la couleur, on va mettre « danger » qui sera rouge. Et donc si on sauvegarde et qu’on recharge notre application, on obtient ce résultat. Très bien, maintenant, nous pouvons passer aux icônes, donc on retourne sur notre documentation, et on peut naviguer directement sur notre component « ion-icon », et cela vous dirigera sur une nouvelle page, car vous pourriez l’ajouter à n’importe quelle application, en tant que package séparé, mais le package Ionic que nous importons à partir du CDN l’a déjà inclus, donc il n’est pas nécessaire d’effectuer une importation supplémentaire. Donc on va insérer notre « ion-icon » au niveau de notre « ion-button », devant le mot « effacer ». Maintenant, une telle icône prend un attribut de nom, que nous retrouverons dans notre page concernant la documentation. Donc je saisis un mot clef, je vais mettre « delete », parfait, si je clique sur cette corbeille, je vais avoir le code juste en bas que je peux copier en cliquant dessus. Donc on revient sur notre code, et nous le collons. Et maintenant si on jette un œil sur notre appli, on peut voir ce rendu, qui peut être encore amélioré un peu en indiquant clairement à l’icône où elle devrait se trouver grâce aux « slots ». Donc tout simplement, dans notre icône, on peut désigner un emplacement de départ, en indiquant « slot = start » et si on revient sur notre appli, on peut voir que nous avons plus d’emplacement entre l’icône et le texte, ça à l’air un peu plus propre. Maintenant il nous reste à introduire une icône pour l’ajout des dépenses, c’est le moment idéal pour que vous puissiez essayer par vous même d’insérer une icône comme pour notre bouton précédent, donc je vous laisse mettre en pause la vidéo et vous exercer. Vous avez réussi ? Trouvons tout d’abord une icône qui correspond à l’ajout de nos dépenses. Donc je vais mettre « add » en mot clef, et je vais récupérer le code de celui-ci qui m’a l’air approprié. Donc on copie le code à côté de notre texte, et on n’oublie pas d’insérer le « solt=start ». On recharge notre application, et voilà le résultat. Donc ce sont des boutons standard, maintenant, qu’en est-il de l’espacement autour des boutons et de l’alignement ? Comment cela peut être réalisé ? C’est ce que nous allons voir dans la prochaine vidéo.