Dans ce tutoriel, nous allons voir comment créer des grilles efficaces 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.
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 -> 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.
Définissez la propriété Grid Height (Hauteur de la grille) sur 100 %.
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 coller à côté ou« As a child » (En tant qu'enfant) si vous êtes dans le composant parent (« GridRow ») pour 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 grille actuellement sélectionnée » situé à côté de la visionneuse d'application (la dernière icône de la barre d'outils verticale).
Il existe 3 bordures colorées :
- Rouge est pour la grille elle-même
- Bleu est pour la ligne de la grille
- Vert représente 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 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 : Dimensionnement de la 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 : 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 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: Centrer les éléments dans la 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) :
Définissez la hauteur de votre grille et de vos lignes comme «Non défini » dans les propriétés 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 la grille #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 exactement où le placer.
Pour clarifier les choses, cliquez sur l'icône «show all grid or current selected » (affichertoute 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é !
Déposez le premier composant «à l'intérieur » de la cellule numéro 4.
Supprimez le deuxième composant «après » le premier «Élément générique ».
Supprimez le troisième composant «avant » le premier «Élément générique ».
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 l'alignement des colonnes 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