Tutoriel n°5 : Stylez votre projet à partir d'un design Figma 

É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.
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 ?