Ionic - 9.10 Variables CSS spécifiques aux composants Ionic
Chaque composant Ionic dispose de variables CSS propres, décrites en bas de sa page dans la documentation. Elles permettent de modifier un composant précis sans changer l'ensemble de l'application. Cette leçon montre comment les utiliser sur un bouton et sur une ombre.
Trouver les variables d'un composant
Dans la documentation Ionic, la page d'un composant liste en bas les attributs CSS qui lui sont propres. Ces variables ne doivent pas être placées dans le root du fichier de variables.
On crée un sélecteur sur l'élément Ionic, par exemple ion-button. Dans ce sélecteur, on peut utiliser les propriétés CSS classiques et les variables Ionic, comme une variable de fond.
Appliquer une variable à un bouton
Sur la page d'authentification, le bouton prenait la couleur bleue par défaut. Sans attribut color, le bouton s'affiche en bleu, car la variable CSS définit son style de base.
Une variable placée dans le fichier de variables s'applique à toute l'application. Elle peut aussi être placée dans un seul composant, par exemple ion-text, pour ne changer que le texte de ce composant.
Utiliser une variable d'ombre
La plupart du temps, les couleurs viennent du thème. Les variables restent utiles pour d'autres réglages, comme l'ombre d'un composant.
La vidéo utilise une variable d'ombre avec une couleur RGBA, que la documentation liste comme prise en charge. L'ombre du bouton devient alors plus large. Les valeurs exactes sont à vérifier dans la documentation.
En résumé
Les composants Ionic ont leurs propres variables CSS, décrites dans leur documentation. Elles se placent dans un sélecteur du composant, globalement ou dans une seule page. Elles servent surtout aux réglages qui ne sont pas des couleurs, comme l'ombre.
Points clés
- Chaque composant Ionic a des variables CSS décrites dans sa documentation.
- Ces variables ne vont pas dans le root du fichier de variables.
- Un sélecteur sur l'élément, comme ion-button, permet de les appliquer.
- Les couleurs passent surtout par le thème, tandis que les variables servent aussi aux ombres.
- Une variable peut cibler toute l'application ou une seule page.
Questions fréquentes
Où trouver la liste des variables d'un composant ?
En bas de la page du composant, dans la documentation officielle d'Ionic.
Faut-il placer ces variables dans le fichier de thème ?
Pas forcément. Elles peuvent être placées dans un sélecteur sur un composant précis, dans une page.
Quand utiliser ces variables plutôt que le thème ?
Surtout pour des réglages comme l'ombre. Pour les couleurs, le thème reste la méthode principale.