Ionic - 8.9 Les composants ion-item et ion-label
Cette leçon présente deux composants très utilisés dans Ionic : ion-item et ion-label. Ils organisent les lignes d'une liste et permettent de mettre en forme le texte. Ils deviennent indispensables dès que l'on construit des formulaires.
La structure d'une liste
Un ion-item se place dans une ion-list, elle-même placée dans une grille. Cette structure permet de contrôler la largeur de la liste.
L'ion-item est un composant parent. Il regroupe des composants enfants, comme des labels et des champs de saisie, et il fournit certains styles. Il possède aussi des attributs slot qui permettent de le positionner dans une liste.
Le composant ion-label
ion-label enveloppe n'importe quel texte pour le styliser plus facilement. Il peut contenir du texte simple, un titre h1 ou un paragraphe.
On l'utilise dans un élément de liste, mais aussi ailleurs, dès qu'il entoure un composant de texte. Son style est surtout visible lorsqu'un thème est présent.
Un champ flottant dans un formulaire
Dans la page de connexion, le label de l'email a une petite animation : il se place au-dessus du champ lorsqu'on le remplit. Ce comportement vient de la position floating, définie sur le ion-label avec l'attribut position.
Sans ion-item, le champ est presque invisible et le label perd sa décoration. L'ion-item apporte donc la mise en forme attendue. Pour un formulaire plus long, on place les champs dans une ion-list.
En résumé
ion-item organise une ligne de liste et regroupe les composants enfants. ion-label entoure le texte pour le styliser. La position floating donne au label un comportement flottant dans les formulaires.
Points clés
- ion-item se place dans une ion-list et fournit des styles aux composants enfants.
- ion-label enveloppe un texte pour le styliser facilement.
- Un ion-label peut contenir du texte simple, un titre ou un paragraphe.
- L'attribut position avec la valeur floating crée un label flottant.
- Un champ placé hors d'un ion-item perd sa mise en forme.
Questions fréquentes
Un ion-label peut-il être utilisé hors d'une liste ?
Oui. Il peut entourer n'importe quel texte, dans une liste ou ailleurs.
Pourquoi le champ email perd-il son style sans ion-item ?
Parce que l'ion-item apporte les styles qui mettent en forme le label et le champ.
Quelles autres positions de label existent ?
La documentation officielle d'Ionic liste toutes les valeurs possibles de l'attribut position.