IONIC Section 4 - 4.16 Finalisation de la mise en page
Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !Maintenant que la logique JavaScript est en place, il ne nous reste plus qu'à soigner la mise en page de notre plan budgétaire. Le plus efficace est de réutiliser les techniques déjà acquises : la grille Ionic et quelques classes CSS prédéfinies.
Uniformiser la grille
Pour que toutes les colonnes aient la même largeur quel que soit l'écran, on copie simplement la configuration déjà appliquée à la première ligne — size-md="6" et offset-md="3" — et on la duplique sur les autres <ion-col>. Avec ce simple ajustement, lignes et colonnes adoptent une largeur cohérente, et l'application devient agréable à lire sur les grands écrans.
Une fois la modification enregistrée, je recharge l'application pour vérifier le rendu et je saisis une facture de 4 € : tout s'aligne correctement, les blocs respirent et la lecture des dépenses est immédiate.
Reste un détail : le total des dépenses, en bas de page, n'est pas centré. Pour y remédier, on revient sur la balise <p> qui contient la mention « Dépenses totales » et on l'enveloppe dans une balise <ion-text class="ion-text-center"> (ou on ajoute directement une classe utilitaire de centrage). Au rechargement, le total apparaît bien centré, ce qui équilibre visuellement l'interface.
Avec ce dernier ajustement, l'application atteint un niveau de finition tout à fait satisfaisant. Si vous souhaitez aller plus loin et tester un style plus personnel, n'hésitez pas : la documentation Ionic regorge de classes utilitaires et de variables CSS prêtes à l'emploi. Pour ma part, je reste volontairement sur un rendu basique afin de garantir la lisibilité du cours et que chacun puisse suivre sans effort. Rendez-vous dans la prochaine vidéo.
En résumé
Cette leçon explique comment finaliser la mise en page d'une application Ionic en appliquant une configuration de grille cohérente (size md = 6, offset = 3) à toutes les colonnes. On teste ensuite l'affichage avec des données réelles, puis on centre le texte du total des dépenses en utilisant des balises p et du CSS. L'instructeur privilégie un style basique plutôt que complexe pour garantir une visibilité et une compréhension optimales.
Points clés
- Appliquer la même configuration de grille (size md = 6, offset = 3) à toutes les colonnes pour assurer leur alignement uniforme
- Tester l'application avec des données réelles (facture 2,4 euros) pour vérifier la qualité de l'affichage
- Centrer l'affichage du total des dépenses en utilisant des balises p et des classes CSS de centrage
- Opter pour un style simple et basique plutôt que personnalisé pour maintenir la clarté et la compréhension du code
- Vérifier que les modifications visuelles s'appliquent correctement après rechargement de l'application
Questions fréquentes
Quelle configuration de grille doit-on utiliser pour aligner les colonnes ?
Une configuration avec size md = 6 et offset = 3, copiée des configurations précédentes du cours et appliquée à toutes les colonnes pour assurer leur cohérence visuelle.
Comment centrer l'affichage du total des dépenses ?
En plaçant le contenu entre des balises p et en utilisant des classes CSS de centrage pour améliorer la présentation visuelle.
Pourquoi l'instructeur recommande-t-il un style basique plutôt que personnalisé ?
Pour assurer une visibilité et une bonne compréhension pour tous les apprenants, la simplicité du style facilite le suivi du cours et la compréhension des concepts.