Ionic - 8.8 ion-list ou ion-grid : quel composant choisir ?
Ionic propose plusieurs composants pour organiser le contenu, et deux reviennent souvent : la liste et la grille. Cette leçon les compare pour savoir lequel utiliser selon le besoin. La règle générale est simple : la liste aligne du contenu vertical, tandis que la grille contrôle la largeur.
Le rôle de la liste
Une liste sert à structurer des éléments ion-item, qui peuvent contenir tout type de contenu. Elle convient bien à l'affichage vertical sur mobile ou sur un site, lorsqu'il n'est pas nécessaire de gérer la largeur.
La documentation indique qu'une liste ne doit contenir que des ion-item. Le composant est optimisé pour ce cas. Pour un contenu défilant verticalement, c'est souvent la meilleure solution.
Placer une liste dans une grille
On peut aussi envelopper une liste dans une colonne de grille. La liste prend alors toute la largeur de sa colonne, et sa taille se gère avec la grille.
La grille suit une structure précise : ion-grid contient des ion-row, et une ion-row ne contient que des ion-col. Dans une colonne, on peut placer un paragraphe, une carte ou une liste.
Choisir selon le besoin
Si l'on veut seulement aligner du contenu verticalement, la liste est le bon choix. Si l'on veut contrôler la largeur ou construire une structure plus complexe, la grille est préférable.
En résumé
ion-list convient au contenu vertical simple, avec des ion-item. ion-grid, avec ses ion-row et ses ion-col, donne le contrôle de la largeur. Les deux peuvent s'associer, car une liste peut être placée dans une colonne. Le choix dépend donc du besoin de mise en page.
Points clés
- Une ion-list ne doit contenir que des ion-item.
- La liste convient à l'affichage vertical simple.
- Une ion-grid organise le contenu en ion-row et ion-col.
- Une ion-col peut contenir une liste, une carte ou un paragraphe.
- La grille est préférable pour gérer la largeur.
Questions fréquentes
Peut-on mettre une liste dans une grille ?
Oui. La vidéo précise que la liste prend toute la largeur de la colonne qui la contient.
Quels enfants une ion-row peut-elle contenir ?
Seulement des ion-col, qui sont ses enfants directs.
Quand utiliser une liste plutôt qu'une grille ?
Quand le contenu doit simplement s'aligner verticalement, sans besoin de contrôle de la largeur.