Tutoriel n°4 : Créer et utiliser des grid

Étape 7: Centrer les éléments dans la grid #2

Si vous souhaitez aligner verticalement le contenu des colonnes dans votre grid, voici ce que vous devez faire :

Tout d'abord, vous devez remettre la "grid height" à 100% (bordure rouge) et remettre la"grid row height" à 100% (bordure bleue) dans les propriétés.
Ensuite, dans les propriétés de la "grid row", changez l'alignement en "ion-align-items-center". Vous pouvez voir que les colonnes sont centrées dans l'espace disponible de la ligne.

Lorsque vous ajoutez du contenu à une colonne, la "cellule" prend plus d'espace dans la "Grid row" et toutes les colonnes continuent d'être centrées entre elles. Pour nous en assurer, ajoutons quelque chose dans une cellule.

Pour ce faire, recherchez "Generic Item" dans la palette, et l'objectif est de le glisser-déposer dans la cellule numéro 4. Mais quelque chose ne va pas... Vous ne voyez pas précisément où le placer.
Pour clarifier la situation, cliquez sur l'icône "show all grid or current selected" pour la désactiver (la dernière icône dans le Visual App Viewer) et cliquez sur "Remove highlight" pour supprimer la sélection actuelle (la cinquième icône en partant du haut à gauche dans le Visual App Viewer).
Glissez-déposez à nouveau votre élément générique dans la cellule 4 : vous pouvez voir quel élément est en surbrillance !

Choisissez "after" lorsque vous le glissez-déposez, puis faites-le 3 fois mais choisissez "inside" pour la deuxième et "before" pour la troisième.

Affichez ensuite à nouveau les bordures de la grille (show all grid or current selected). Modifiez la propriété Alignment de la "Grid row" sur"ion-align-items-end" pour montrer que les colonnes s'alignent en bas.
Ce tutoriel est maintenant terminé. Si vous souhaitez aller plus loin sur l'utilisation des autres propriétés de la grille, consultez la documentation de Convertigo :
Accéder à la documentation de la grille de Convertigo

Succès !

Vous avez terminé cette étape avec succès, veuillez cliquer sur le bouton Étape suivante pour passer à l'étape suivante du tutoriel.
Fermer
Vous n'avez pas effectué toutes les actions requises dans cette étape, êtes-vous sûr de vouloir passer à l'étape suivante ?