Étape 2 : Intégrer les grid
Maintenant que vous avez votre application vide, il est temps d'en définir la mise en page : La façon dont les éléments seront affichés dans la page. Rappelons rapidement ce que nous avons :
- Un titre et un sous-titre
- Deux champs de saisie
- Un bouton
Créons des grids : nous avons quatre blocs, donc 4 Grid Rows de 25% chacun :
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page -> Content puis cliquez dessus et cherchez le composant"Grid" dans la Palette.
Lorsque vous faites glisser le composant Grid vers la fenêtre App Viewer, choisissez "inside". Affichez ensuite 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 de la barre d'outils verticale).
Ici, vous n'avez pas besoin de la colonne droite/gauche, il suffit donc de supprimer la "GridCol1" dans le Treeview.
Réglez la hauteur de la "GridRow" à 25% dans les propriétés de la GridRow -> Height.
Ensuite, il vous suffit de dupliquer cette GridRow 4 fois dans la grille (clic droit sur la GridRow-> Copier, puis clic droit sur la grille principale et choisir Coller "en tant qu'enfant" dans la grille)
La page est maintenant divisée en 4 blocs égaux, où vous ajouterez les composants de votre page.