CATALOGUE Code & Data Apprendre Ionic 5 Créer un Menu dans une Application Ionic

Créer un Menu dans une Application Ionic

Menu de l’application : ion-menu
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

Configuration du IonMenu dans Ionic

Objectifs

Apprendre à configurer et implémenter un menu dans une application Ionic, et à ajouter des boutons pour le manipuler.

Résumé

Découvrez comment créer et configurer un menu dans votre application Ionic, et ajouter un bouton pour afficher et cacher le menu.

Description

Dans cette vidéo, nous allons apprendre à créer un menu pour une application Ionic. Ce menu sera affiché sur la partie gauche de l'application et contiendra des liens vers différentes pages. Nous verrons comment ajouter un bouton sur l'entête de l'application pour afficher et cacher ce menu.

La première étape consiste à utiliser la balise IonMenu, en spécifiant les propriétés side pour indiquer que le menu s'affiche à gauche, et contentId pour attacher le menu au composant IonRouterOutlet. Ensuite, nous ajoutons un IonHeader et un IonContent, similaire à la structure d'une page classique, pour définir le contenu du menu.

Le contenu du menu sera composé d'une liste d'items grâce à la balise IonList. Chaque item, encapsulé dans un IonMenuToggle, redirige l'utilisateur vers une autre page à l'aide de RouterLink. Enfin, nous verrons comment ajouter un bouton de menu sur l'entête de la page avec la balise IonMenuButton pour améliorer l'ergonomie de l'application. Une correction d'une erreur de routage et de mise en place du bouton de menu sera également abordée.

Voir plus

Questions - réponses

Quel est le rôle de la balise IonMenuToggle?
La balise IonMenuToggle permet de fermer automatiquement le menu lorsque l'on clique sur un item du menu.
Pourquoi faut-il utiliser la propriété contentId dans IonMenu?
La propriété contentId permet de spécifier l'identifiant du composant auquel le menu sera attaché, en général IonRouterOutlet, pour qu'il soit lié à toutes les pages de l'application.
Comment améliorer l'ergonomie du menu dans l'application?
Pour améliorer l'ergonomie, ajouter un bouton de menu dans l'entête de la page à l'aide de la balise IonMenuButton pour indiquer clairement aux utilisateurs que le menu est accessible.

Programme détaillé