Ionic - 8.19 Afficher un menu avec le contrôleur ActionSheet

Cette leçon montre comment utiliser le contrôleur ActionSheet d'Ionic. Au clic sur le bouton Book, l'application affiche un menu qui propose de choisir une date pour la réservation. Pour l'instant, la réservation n'est pas réellement enregistrée : le choix déclenche seulement un message dans la console.

Préparer le menu au clic sur Book

Le contrôleur ActionSheet est injecté dans le constructeur de la page. Une méthode crée ensuite le menu lorsque l'utilisateur clique sur le bouton Book.

Le menu reçoit un titre, nommé header, et une liste de boutons. Le premier bouton, de type texte, permet de choisir la date. Le second bouton sert à annuler.

Définir les boutons, leur rôle et leur handler

Le bouton Annuler reçoit le rôle cancel. Ce rôle place automatiquement le bouton en bas de la liste.

Le bouton de choix de date reçoit un handler, c'est-à-dire le code exécuté quand on clique dessus. Ici, le handler appelle la méthode openBookingModal avec la valeur select. Le titre du menu reste à personnaliser.

async openActionSheet() {
  const actionSheet = await this.actionSheetCtrl.create({
    header: '<titre-du-menu>',
    buttons: [
      {
        text: 'Choisir la date',
        handler: () => this.openBookingModal('select'),
      },
      {
        text: 'Annuler',
        role: 'cancel',
      },
    ],
  });
  await actionSheet.present();
}

Créer la méthode openBookingModal

La méthode openBookingModal reçoit un paramètre nommé mode. Pour le moment, elle affiche simplement la valeur de mode dans la console.

Elle est appelée depuis le handler du bouton, avec la valeur select. C'est ainsi que le choix de la date déclenche le code.

openBookingModal(mode: string) {
  console.log(mode);
}

Afficher le menu et tester

L'affichage passe par await actionSheet.present(). Le mot await est nécessaire, car la création du menu renvoie une promesse.

Après connexion, cliquer sur Book ouvre le menu. Le bouton Annuler le ferme. Cliquer sur Select affiche select dans la console.

En résumé

Un ActionSheet affiche un menu d'actions à l'écran. Les boutons reçoivent un texte, un rôle et un handler. Le rôle cancel place le bouton Annuler en bas. La méthode openBookingModal reçoit la valeur choisie et l'affiche dans la console pour cette première étape.

Points clés

• Le contrôleur ActionSheet affiche un menu d'actions à l'écran.
• Un bouton reçoit un texte, un rôle et un handler.
• Le rôle cancel place le bouton Annuler en bas de la liste.
• Le handler indique le code à exécuter lors du clic.
• Le menu est affiché avec await, car sa création renvoie une promesse.

Questions fréquentes

Pourquoi le bouton Annuler est-il toujours en bas ?

Il reçoit le rôle cancel. Ce rôle le place en bas de la liste des boutons.

À quoi sert le handler d'un bouton ?

Il contient le code exécuté lorsque l'utilisateur clique sur le bouton. Dans la vidéo, il appelle openBookingModal.

Comment vérifier que le menu fonctionne ?

Après connexion, cliquez sur Book pour ouvrir le menu. Le bouton Annuler le ferme, et Select affiche un message dans la console.