CATALOGUE Code & Data Apprendre Ionic 5 Intégration de Composants Ion en HTML

Intégration de Composants Ion en HTML

Créer une liste d'éléments à cocher: ion-checkbox
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Ionic 5
Revoir le teaser Je m'abonne
Transcription
99,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
99,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Affichage et Gestion des Catégories avec IonCheckbox

Objectifs

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.

Résumé

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

Description

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.

Voir plus

Questions - réponses

Pourquoi utiliser un IonHeader pour l'entête de la page ?
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.
Quelle est l'utilité de la balise IonContent ?
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.
Comment positionner une IonCheckbox à gauche d'un IonItem ?
Pour positionner une IonCheckbox à gauche d'un IonItem, il suffit de la déclarer avant le IonLabel dans la structure de l'IonItem.

Programme détaillé