CATALOGUE Code & Data Apprendre Ionic 5 Créer une fonctionnalité de filtrage d'annonces avec Ionic

Créer une fonctionnalité de filtrage d'annonces avec Ionic

Ajouter un bouton à l'entête de la page: ion-toolbar et ion-button
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

Créer une fonctionnalité de filtrage des annonces.
Ajouter un bouton de filtrage dans une application Ionic.
Mettre en œuvre un modal pour la sélection de catégories.

Découvrez comment ajouter un bouton de filtrage dans l'entête de votre application Ionic afin de permettre aux utilisateurs de sélectionner les catégories d'annonces qui les intéressent.

Dans cette leçon, nous allons explorer la création d'une fonctionnalité de filtrage des annonces par catégorie à l'aide d'Ionic Framework. D'abord, nous allons ajouter un bouton à droite de l'entête avec une icône parlante. Ce bouton permettra d'afficher un composant de modal qui offre une liste de catégories. L'utilisateur pourra sélectionner les catégories qui l'intéressent, ce qui mettra à jour la liste des annonces. Nous détaillerons l'ajout du bouton dans la balise IonHeader, utilisant des composants tels que IonToolbar et IonIcon. Enfin, nous verrons comment positionner le bouton correctement à droite de l'entête pour une meilleure expérience utilisateur.

En cliquant sur ce bouton, un modal sera affiché, permettant à l'utilisateur de choisir les catégories à filtrer. Nous vous guiderons à travers chaque étape du processus, depuis l'ajout du bouton jusqu'à la gestion des états et la mise à jour dynamique des annonces affichées.

Voir plus
Questions réponses
Pourquoi utilise-t-on des balises spécifiques comme IonHeader et IonToolbar dans Ionic?
Ces balises permettent de structurer correctement l'interface utilisateur, notamment l'entête de l'application, et de gérer les éléments tels que les titres et les boutons de manière cohérente.
Quel est le rôle de la balise IonButtons?
IonButtons encapsule un ou plusieurs boutons et permet de les positionner automatiquement et correctement dans l'entête ou le pied de page.
Comment indiquer qu'un IonButton contient uniquement une icône sans texte?
En utilisant la propriété 'slot' avec la valeur 'icon-only'.

Programme détaillé