Ionic - 8.7 L'attribut fixed de la grille Ionic
La grille Ionic adapte sa largeur à l'écran. Avec l'attribut fixed, elle garde une largeur maximale qui change par paliers. Cette leçon montre son effet sur deux colonnes et explique où trouver les seuils dans la documentation.
Ajouter deux colonnes
On ajoute une ligne ion-row avec deux colonnes ion-col. Deux sauts de ligne séparent les deux exemples. La vidéo précise que cette méthode n'est pas particulièrement recommandée.
Pour que la grille ne prenne pas toute la largeur, on ajoute l'attribut fixed à la grille. Cet attribut est indiqué dans la documentation d'Ionic.
Observer les seuils de largeur
Avec fixed, la grille ne prend pas toute la largeur de l'écran. Sous un certain seuil, elle occupe environ 540 pixels. Dès que l'écran dépasse le seuil suivant, elle passe à 720 pixels.
La vidéo montre le changement en passant de 767 à 768 pixels de largeur. À partir d'une largeur plus grande, la grille prend toute la largeur de l'écran, avec un écart égal de chaque côté.
Modifier les seuils ou garder les valeurs par défaut
La documentation d'Ionic explique comment modifier ces seuils avec du CSS. Il est aussi possible de travailler avec les valeurs par défaut, plus simples à utiliser pour débuter.
En résumé
L'attribut fixed donne à la grille une largeur maximale qui change par paliers selon la taille de l'écran. Deux colonnes permettent de voir cet effet. La documentation précise les seuils et explique comment les modifier en CSS.
Points clés
- Sans fixed, la grille reprend la largeur de l'écran selon le comportement par défaut.
- Avec fixed, la largeur de la grille change à certains seuils.
- La vidéo montre le changement entre 767 et 768 pixels.
- Les valeurs par défaut suffisent souvent pour débuter.
- La documentation Ionic décrit comment modifier les seuils en CSS.
Questions fréquentes
À quoi sert l'attribut fixed ?
Il limite la largeur de la grille à des paliers, au lieu de l'étendre sur toute la largeur de l'écran.
Pourquoi la grille ne change-t-elle pas à chaque pixel ?
Elle change à des seuils définis par Ionic. La vidéo montre un de ces seuils entre 767 et 768 pixels.
Faut-il toujours utiliser des sauts de ligne ?
Non, la vidéo les utilise seulement pour séparer les exemples et précise que cette pratique n'est pas particulièrement recommandée.