Dans ce tutoriel, nous allons voir comment créer des grilles efficaces pour vos applications.
Étape 1 : Créer un nouveau projet
Vous êtes maintenant habitué à cette étape de démarrage, mais au cas où vous l'auriez oubliée : Pour créer un nouveau projet, allez dans Fichier -> Nouveau -> Projet et cherchez "Convertigo Low Code FullStack Web/Desktop or Mobile app project" et nommez-le "grid_tutorial".
Une fois votre projet créé, il vous suffit d'utiliser le bouton play pour ouvrir le Visual App Viewer.
Note : N'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas continuer correctement le tutoriel.
Étape 2 : Intégrer les grilles
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page -> Content 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 placer avant, à l'intérieur ou après l'élément cible.
De plus, il est livré avec une ligne de grille, deux colonnes de grille et du texte à l'intérieur de celles-ci.
C'est ce qu'on appelle les composants "Hint".
La plupart des composants de Convertigo NGX en sont doté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" pour le coller à côté ou "As as child" 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 un texte allant de 1 à 12.
Maintenant que vous avez tout créé, vous voulez sûrement afficher les bordures de la grille : Pour ce faire, cliquez sur le bouton "Show all grids or current selected" situé à côté de l'app viewer (la dernière icône dans la barre d'outils verticale).
Il y a 3 bordures colorées :
- Rouge est pour la grille elle-même
- Bleu est pour la ligne de la grille
- Vert est pour les colonnes de la grille
Étape 3 : Dimensionnez 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 toutes vos GridCol (1 à 12) en maintenant Shift + Click, puis allez dans les propriétés et cherchez "Size 0-576 px (xs)" et sélectionnez 12. Cela signifie que dans cette taille d'écran, votre grille sera affichée verticalement.
Étape 4 : Dimensionnement de la grille n° 2
Définissons les autres tailles d'écran. Répétez l'opération de sélection de tous vos GridCol (Shift + clic) et choisissez cette fois "Size 576-768 px (sm)" et définissez-le à 6. Cela signifie que dès que la taille de l'écran est supérieure à 576px, la grille s'affichera sous la forme de 6 colonnes à gauche et de 6 colonnes à droite. C'est le principe de base de la réactivité, la façon dont votre grille s'affichera en fonction de l'espace dont elle dispose.
Étape 5 : Dimensionnement de la grille n° 3
Faites de même avec la taille d'écran supérieure "768-992 px (md)" et définissez sa taille à 1. Cela signifie qu'elles seront affichées l'une à côté de l'autre horizontalement, en prenant toute la taille de l'écran. Vous pouvez évidemment choisir les tailles que vous voulez dans l'onglet Propriétés en fonction de la façon dont vous voulez l'afficher, ce tutoriel vous montre les bases.
Enfin, l'étape suivante montre comment centrer votre contenu (votre texte) dans votre grille.
Étape 6: Centrer les éléments dans la grille
Maintenant que la taille de la grille n'a plus de secret pour vous, voyons comment vous pouvez interagir avec le contenu que vous placez dans la grille (dans ce cas les nombres 1 à 12) :
Mettez votre grille et la hauteur de la ligne de la grille comme "Not set" dans les propriétés afin qu'elle s'adapte à la hauteur du contenu des colonnes.
Ensuite, dans la palette, cherchez le composant "Format Layout". C'est ce 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 changez simplement la propriété générale "Alignment" en "ion-text-center"
Étape 7: Centrer les éléments dans la grille #2
Si vous souhaitez aligner verticalement le contenu des colonnes dans votre grille, voici ce que vous devez faire :
Tout d'abord, vous devez remettre la hauteur de la grille à 100% (bordure rouge) et remettre la hauteur de la ligne de la grille à 100% (bordure bleue) dans les propriétés.
Ensuite, dans les propriétés de la ligne de la grille, 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 ligne de grille 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 (l'icône du bas 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 ciblé !
Choisissez "après" lorsque vous le glissez-déposez, puis faites-le 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 l'élément sélectionné). Modifiez la propriété Alignment de la ligne de la grille 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 dans l'utilisation des autres propriétés de la grille, consultez la documentation de Convertigo :
Access Convertigo Grid Documentation