Ionic - 9.9 Styliser un composant avec du CSS personnalisé
Cette leçon améliore la page Mes offres, dont le style reste simple. Le titre h1 et les dates sont retravaillés avec du CSS personnalisé. Pour cela, on commence par créer un composant dédié, dont le style reste limité à ce composant.
Créer un composant dédié
Dans un terminal, on génère un composant avec la commande ng generate component, en indiquant le dossier et le nom souhaité. Le nom est libre.
Le contenu de l'élément est ensuite déplacé dans le nouveau fichier HTML du composant. Pour afficher une offre, le composant reçoit cette offre en entrée grâce à un décorateur Input de type Place. Les erreurs disparaissent une fois cet import ajouté.
ng generate component <dossier>/<nom-du-composant>Afficher les dates de réservation
Une div contient une icône de calendrier, de couleur tertiary, et un texte. Une fonction renvoie la date à afficher, avec le pipe date pour un affichage plus lisible.
Une ligne du même type peut être ajoutée pour la date de retour. La vidéo ne la détaille pas.
Mettre en forme avec du CSS
La classe offer-date utilise display flex et un alignement vertical au centre, pour que l'icône et le texte soient alignés. Une classe space-left ajoute une marge gauche de 5 pixels pour aérer les éléments.
Le titre h1 est sélectionné dans le CSS du composant seulement, pour ne pas toucher les h1 du reste du projet. Il reçoit une taille de police de 18 pixels, une bordure pleine de 1 pixel en couleur primary, un padding de 8 pixels et un rayon de bordure de 5 pixels.
En résumé
Un composant dédié isole le style de ses éléments. Le CSS local permet de travailler la mise en page, et la couleur primary du thème habille l'icône et le titre. Les autres pages restent inchangées.
Points clés
- La commande ng generate component crée un composant dédié.
- Un décorateur Input de type Place transmet l'offre au composant.
- Le pipe date rend la date plus lisible.
- display flex et l'alignement au centre placent l'icône et le texte sur la même ligne.
- Une règle CSS sur h1 dans le composant ne touche pas le reste du projet.
Questions fréquentes
Pourquoi créer un composant plutôt que modifier directement la page ?
Un composant isole son HTML et son CSS, ce qui évite d'affecter les autres pages.
Le h1 de tout le projet change-t-il ?
Non. La règle est écrite dans le CSS du composant, elle ne s'applique qu'à lui.
Pourquoi utiliser la couleur primary ?
Elle reprend la couleur du thème, donc elle change avec le thème si l'on modifie les variables.