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

Étape 2 : Intégrer les grid

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 Grid row, deux Grid columns 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 de ce dernier.
Répétez l'opération pour obtenir 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 Grid row
- Vert correspond aux Grid columns
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 ?