CATALOGUE Code & Data Formation Ionic Apprendre Ionic 5

Intégration de Composants Ion en HTML

Retour à la formation
Chapitre 3 Leçon 8
Précédent
Suivant

Apprenez à utiliser des composants Ion tels que IonHeader, IonToolbar, et IonCheckbox pour afficher et gérer des catégories dans un fichier HTML.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous travaillons sur l’affichage de notre catégorie modal à l’aide des composants Ion. Nous allons tout d'abord ouvrir le fichier HTML lié à notre composant. Ensuite, nous commencerons par déclarer un IonHeader pour l'entête, avec à l'intérieur un IonToolbar. Nous utiliserons la même couleur que pour la page, et déclarerons un titre, 'filtré par catégorie'. Pour le contenu, nous ajouterons une balise IonContent pour afficher une liste de catégories, chaque catégorie ayant une IonCheckbox. Si la checkbox est cochée, cela signifie que la catégorie nous intéresse et que nous voulons l'afficher; sinon, nous l'ignorerons dans notre liste d'annonces. Nous utilisons donc IonListe pour la liste, et IonItems pour chaque item. A l’intérieur de chaque item, une IonCheckbox sera positionnée à gauche avec un IonLabel pour le texte. Nous commençons par un contenu statique avec des catégories comme informatique, immobilier, ameublement, et électroménager. Enregistrez et visualisez le résultat pour confirmer le bon affichage. Dans la prochaine vidéo, nous verrons comment dynamiser le tout pour récupérer les vraies catégories liées aux annonces.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :
- Comprendre l'utilisation des composants Ion pour structurer le contenu.
- Apprendre à intégrer et gérer des IonCheckbox dans une liste.
- Savoir configurer visuellement des éléments HTML pour une meilleure UX.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et en développement avec le Framework Ionic.

Métiers concernés

Les compétences acquises seront utiles pour les développeurs Front-End, développeurs Full-Stack, et les intégrateurs Web.

Alternatives et ressources

Les alternatives à cette méthode comprennent l'utilisation de composants d'autres frameworks de développement web comme React avec Material-UI ou Vue.js avec Vuetify.

Questions & Réponses

Le IonHeader est utilisé pour créer une entête cohérente et stylisée qui s'intègre parfaitement avec les autres composants Ion, offrant une meilleure expérience utilisateur.
La balise IonContent est utilisée pour contenir le contenu principal de la page, elle sert de conteneur flexible et permet de gérer le défilement et les comportements spécifiques aux plateformes mobiles.
Pour positionner une IonCheckbox à gauche d'un IonItem, il suffit de la déclarer avant le IonLabel dans la structure de l'IonItem.