Ionic - 7.13 Ajouter un bouton d'action dans la barre d'outils
La page des offres doit permettre de créer une nouvelle offre. Pour cela, cette leçon ajoute une icône dans la barre d'outils, qui ouvre une page dédiée. Elle montre aussi comment revenir en arrière depuis cette nouvelle page. La liste des offres reprend le même principe que la page de découverte.
Afficher la liste des offres
La page des offres reprend le template de la page de découverte. Les lieux sont listés dans un ion-list, et chaque élément utilise un lien dynamique construit à partir de l'identifiant du lieu.
La page injecte le service de lieux dans son constructeur, puis expose le tableau des lieux, afin que le modèle HTML puisse le parcourir.
Ajouter l'icône dans la barre d'outils
Sous le titre de la page, on insère un ion-buttons avec le slot primary. À l'intérieur, un ion-button indique le chemin vers la nouvelle page, et une ion-icon affiche l'icône add.
Au départ, le clic ne fonctionne pas, car l'icône n'est pas placée correctement dans le bouton. Une fois l'icône placée au bon endroit, le clic ouvre bien la nouvelle page d'offre.
<ion-buttons slot="primary">
<ion-button routerLink="/places/tabs/offers/new">
<ion-icon name="add"></ion-icon>
</ion-button>
</ion-buttons>Revenir en arrière depuis la nouvelle page
La nouvelle page reçoit le titre Nouvelle offre. Un ion-buttons placé en position de départ ajoute le bouton retour, qui ramène à la liste des offres.
Après la sauvegarde, le bouton retour fonctionne comme prévu. Le bouton Éditer, qui demande l'identifiant du lieu dans son chemin, est traité dans la leçon suivante.
En résumé
La barre d'outils peut accueillir un bouton d'action avec une icône. Le lien routerLink ouvre la nouvelle page d'offre. Un ion-buttons en position de départ fournit le bouton retour. Le bouton Éditer, qui a besoin de l'identifiant, est préparé pour la suite.
Points clés
- Un ion-buttons placé dans le slot primary affiche un bouton d'action.
- Une ion-icon avec le nom add affiche l'icône d'ajout.
- routerLink redirige vers la page de création d'une offre.
- L'icône doit être correctement placée dans le bouton pour que le clic fonctionne.
- Un bouton retour est ajouté dans un ion-buttons en position de départ.
Questions fréquentes
Pourquoi le clic ne fonctionnait-il pas au début ?
La vidéo indique que l'icône n'était pas au bon endroit dans le bouton. Une fois placée correctement, le clic a fonctionné.
Comment la liste des offres est-elle affichée ?
Une boucle Angular parcourt le tableau des lieux dans une liste Ionic. Chaque élément utilise un lien dynamique.
À quoi sert le slot primary ?
Il désigne l'emplacement prévu pour les actions principales de la barre d'outils.