Ionic - 7.8 Ajouter les onglets dans notre application
Dans cette leçon, nous ajoutons une barre d'onglets à la page des lieux. Ionic fournit les composants nécessaires, mais leur intégration avec Angular diffère légèrement de la documentation officielle. Nous créons la barre, puis nous configurons le routage des pages enfants et la redirection de la page d'accueil. Le résultat est une navigation par onglets fonctionnelle.
Créer la barre d'onglets
Dans le fichier HTML de la page, on enveloppe la logique dans un composant ion-tabs qui contient une barre ion-tab-bar. Cette barre reçoit un slot bottom pour se positionner correctement en bas de l'écran.
Chaque bouton est un ion-tab-button qui reçoit un identifiant grâce à l'attribut tab, par exemple discover pour la découverte. Dans chaque bouton, un ion-label affiche le texte et un ion-icon affiche une icône, comme search pour la recherche ou card pour les offres.
- Envelopper la logique dans un ion-tabs
- Ajouter une ion-tab-bar avec le slot bottom
- Créer un ion-tab-button par onglet, avec son attribut tab
- Ajouter un ion-label et un ion-icon à chaque bouton
Configurer les routes enfants
Avec Angular, on n'ajoute pas d'élément ion-tab pour chaque onglet. Angular affiche automatiquement la page correspondant à l'onglet choisi, à condition que l'identifiant du bouton corresponde au chemin de la route.
Les routes sont regroupées dans un module de routage. La route des onglets contient des routes enfants : la découverte, les offres, la nouvelle offre, la modification d'une offre et le détail des réservations. L'identifiant du lieu est transmis comme paramètre dans l'URL.
Les routes enfants sont chargées à la demande. Le code d'une page n'est téléchargé que lorsqu'on appuie dessus. Les chemins codés en dur doivent aussi être placés avant le segment dynamique, sinon la route ne fonctionne pas.
Rediriger et nettoyer la page
Une route vide redirige vers discover avec l'option de correspondance complète. L'application ouvre ainsi directement l'onglet de découverte.
Le module de routage remplace l'ancienne configuration du module principal. Dans le template des onglets, on supprime l'en-tête et le contenu Ionic devenus inutiles. Après sauvegarde, la page de découverte s'affiche avec la barre d'onglets.
En résumé
La barre d'onglets se crée avec ion-tabs et ion-tab-bar, puis chaque bouton reçoit un identifiant. Avec Angular, les routes enfants associées à ces identifiants affichent les bonnes pages. Une redirection ouvre la découverte par défaut, et l'en-tête superflu disparaît.
Points clés
- La barre d'onglets utilise ion-tab-bar, avec un slot bottom pour le positionnement.
- Chaque ion-tab-button reçoit un identifiant grâce à l'attribut tab.
- Angular affiche la page enfant dont le chemin correspond à l'identifiant du bouton.
- Les routes enfants sont chargées à la demande, ce qui limite les téléchargements inutiles.
- La route vide redirige vers discover avec une correspondance complète.
Questions fréquentes
Faut-il ajouter un élément ion-tab pour chaque onglet ?
Non, avec Angular ce n'est pas nécessaire. Il suffit que l'identifiant du bouton corresponde à la route.
Pourquoi les chemins codés en dur doivent-ils précéder le segment dynamique ?
L'ordre compte. Si le segment dynamique vient en premier, il capte les chemins fixes et ceux-ci ne fonctionnent plus.
Que se passe-t-il si l'application s'ouvre sans chemin précis ?
La route vide redirige vers discover, qui ouvre la page de découverte par défaut.