Ionic - 8.10 Styliser un texte avec ion-text et ion-label
Pour colorer un texte dans une page Ionic, plusieurs solutions existent. Cette leçon compare trois approches : un style CSS, un ion-label et un ion-text. Elle explique pourquoi ion-text est recommandé pour styliser un simple texte.
Colorer un texte avec un style ou un label
Une première méthode consiste à ajouter un style CSS avec la couleur souhaitée, par exemple dans une balise style. La vidéo montre aussi qu'on peut placer le texte dans un ion-label, avec un attribut color.
Ces deux solutions donnent le même résultat à l'écran. Ce n'est toutefois pas la plus adaptée, car le label est prévu pour les éléments d'une liste.
Choisir ion-text pour un simple texte
Le composant ion-text accepte un attribut color, comme danger. Pour styliser simplement un texte, la vidéo recommande ion-text, car il évite les problèmes de compatibilité.
ion-label reste préférable lorsqu'on gère beaucoup de textes, par exemple dans un formulaire. Pour un texte isolé, ion-text est plus approprié.
<ion-text color="danger">Votre texte en rouge</ion-text>En résumé
Pour colorer un texte simple, utilisez ion-text avec un attribut color. ion-label convient mieux aux éléments de formulaire et aux listes. Un style CSS fonctionne aussi, mais il n'est pas la méthode la plus adaptée dans Ionic.
Points clés
- Un style CSS peut colorer un texte, mais ce n'est pas la solution la plus adaptée.
- ion-label est conçu pour les éléments d'une liste et les formulaires.
- ion-text accepte un attribut color, comme danger.
- ion-text évite les problèmes de compatibilité, selon la vidéo.
- Pour un simple texte, ion-text est recommandé.
Questions fréquentes
Peut-on utiliser ion-label pour colorer un texte ?
Oui, le résultat est le même. Mais ion-label est surtout conçu pour les formulaires et les éléments de liste.
Quand utiliser ion-label ?
Quand on gère beaucoup de textes, par exemple dans un formulaire.
Que fait l'attribut color ?
Il applique une couleur du thème au texte, comme danger.