Dans ce tutoriel, nous allons voir comment créer efficacement des grilles pour vos applications.
Étape 1 : Créer un nouveau projet
Vous êtes désormais habitué à cette étape initiale, mais au cas où vous l'auriez oubliée : pour créer un nouveau projet, allez dans Fichier -> Nouveau -> Projet, recherchez « Convertigo Low Code Web/Desktop or Mobile app project » et nommez-le « grid_tutorial ».
Une fois votre projet créé, utilisez simplement le bouton Lecture pour ouvrir la visionneuse d'application visuelle.
Remarque : n'oubliez pas que si vous donnez un autre nom à votre projet, vous ne pourrez pas suivre correctement le tutoriel.
Étape 2 : Intégrer les grilles
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page -> Contenu, puis cliquez dessus et recherchez le composant « Grid » dans la palette.
Lorsque vous faites glisser le composant Grid vers la fenêtre App Viewer, vous pouvez choisir de le déposer avant, à l'intérieur ou après l'élément cible.
De plus, il est fourni avec une ligne Grid, deux colonnes Grid et du texte à l'intérieur.
Ce sont ce qu'on appelle des composants « Hint ».
La plupart des composants Convertigo NGX en sont équipés.
Remplacez le texte « Column11 » par « 1 » et « Column12 » par « 2 ».
Sélectionnez ensuite le premier composant « GridCol », copiez-le (CTRL+C) et collez-le (CTRL+V).
Selon l'endroit où vous vous trouvez dans l'arborescence, vous devrez choisir le bouton « As a sibling » (En tant que frère) pour le coller à côté ou « As a child » (En tant qu'enfant) si vous vous trouvez dans le composant parent (« GridRow ») pour le coller à l'intérieur.
Répétez l'opération pour obtenir finalement douze (12) composants « GridCol » avec du texte allant de 1 à 12.
Maintenant que vous avez tout créé, vous souhaitez certainement afficher les bordures de la grille : pour ce faire, cliquez sur le bouton « Afficher toutes les grilles ou la sélection actuelle » situé à côté de la visionneuse d'application (dernière icône de la barre d'outils verticale).
Il existe 3 bordures de couleur :
- Le rouge correspond à la grille elle-même
- Le bleu correspond à la ligne de la grille
- Le vert correspond aux colonnes de la grille
Étape 3 : Déterminez la taille de votre grille
Vous avez maintenant vos douze colonnes affichées dans votre application. Nous voulons définir leur taille en fonction de la résolution de l'écran : Commençons par définir le plus petit écran : 0-576 px. Sélectionnez tous vos GridCol (1 à 12) en maintenant la touche Maj enfoncée et en cliquant, puis allez dans les propriétés et recherchez « Taille 0-576 px (xs) » et sélectionnez 12. Cela signifie que dans cette taille d'écran, votre grille s'affichera verticalement.
Étape 4 : Dimensionnez votre grille n° 2
Définissons les autres tailles d'écran. Répétez l'opération consistant à sélectionner tous vos GridCol (Maj + clic) et cette fois-ci, choisissez « Taille 576-768 px (sm) » et définissez-la à 6. Cela signifie qu'une fois que la taille de l'écran est supérieure à 576 px, la grille s'affichera avec 6 colonnes à gauche et 6 colonnes à droite. C'est le principe de base de la réactivité : la manière dont votre grille s'affichera en fonction de l'espace dont elle dispose.
Étape 5 : Dimensionnez votre grille n° 3
Faites de même avec la taille d'écran supérieure « 768-992 px (md) » et définissez sa taille sur 1. Cela signifie qu'elle s'affichera horizontalement, occupant toute la taille de l'écran. Vous pouvez bien sûr choisir les tailles que vous souhaitez dans l'onglet Propriétés en fonction de la manière dont vous souhaitez l'afficher. Ce tutoriel vous montre les bases.
Enfin, l'étape suivante vous montrera comment centrer votre contenu (votre texte) dans votre grille.
Étape 6: Centrez les éléments dans votre grille
Maintenant que le dimensionnement de la grille n'a plus de secret pour vous, voyons comment vous pouvez interagir avec le contenu que vous avez placé dans la grille (dans ce cas, les chiffres de 1 à 12) :
Dans les propriétés, définissez la hauteur de votre grille et de ses lignes sur « Non défini » afin qu'elle s'adapte à la hauteur du contenu des colonnes.
Ensuite, dans la palette, recherchez le composant « Format Layout ». C'est le composant qui positionnera le texte dans votre élément (la grille dans ce cas).
Glissez-déposez ce Format Layout dans l'élément « Grid », puis modifiez simplement la propriété générale « Alignment » en « ion-text-center ».
Étape 7: Centrer les éléments dans votre grille n° 2
Si vous souhaitez aligner verticalement le contenu des colonnes de votre grille, voici la marche à suivre :
Vous devez d'abord rétablir la hauteur de la grille à 100 % (bordure rouge) et la hauteur des lignes de la grille à 100 % (bordure bleue) dans les propriétés.
Ensuite, dans les propriétés des lignes de la grille, modifiez 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 » occupe plus d'espace dans la ligne de la grille et toutes les colonnes continuent d'être centrées entre elles. Pour en être sûr, 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 les choses, cliquez sur l'icône « show all grid or current selected » (afficher toute la grille ou la sélection actuelle) pour la désactiver (icône en bas dans le Visual App Viewer) et cliquez sur « Remove highlight » (supprimer la sélection) pour supprimer la sélection actuelle (cinquième icône en partant du haut à gauche dans le Visual App Viewer).
Maintenant, glissez-déposez à nouveau votre élément générique dans la cellule 4 : vous pouvez voir quel élément est ciblé !
Choisissez « après » lorsque vous le glissez-déposez, puis répétez l'opération 3 fois, mais choisissez « à l'intérieur » pour la deuxième et « avant » pour la troisième.
Affichez ensuite à nouveau les bordures de la grille (afficher toute la grille ou la sélection actuelle). Modifiez la propriété Alignement de la ligne de la grille sur « ion-align-items-end » pour afficher que les colonnes s'alignent en bas.
Ce tutoriel est maintenant terminé. Si vous souhaitez approfondir vos connaissances sur l'utilisation des autres propriétés de la grille, consultez la documentation Convertigo :
Accéder à la documentation Convertigo Grid