Step 2 : Integrate Grids
Now that you have your emply application, it's time to set up the layout : How the elements will be displayed in the page. Let's quickly recall what we have :
- A title and a subtitle
- Two input text fields
- A button
Let's create grids : we have four blocks, so 4 Grid Rows of 25% each :
In your project, go to Application -> NgxApp
-> Pages -> Page -> Content then click it and search for the "Grid" component in the Palette.
When dragging the Grid component to the App Viewer window, choose "inside". Then display the grid borders : To do so, click the "Show all grids or current selected" button located next to the app viewer (the last icon in the vertical toolbar).
Here you don't need the right/left column, so just delete the "GridCol1" in the Treeview.
Set up the "GridRow" height to 25% in the GridRow properties -> Height.
Then you simply will have to duplicate this GridRow 4 times in the Grid (right click on the GridRow-> Copy, then right click on the main Grid and choose Paste "as a child" in the Grid)
The page is now splitted in 4 equal blocks, where you will add your page components.