UI layout of Progressive Web Applications
To create views for Progressive Web Applications (PWA), you must first understand that the positioning of panels containing UI elements in Progressive Views is based on the twelve-column layout explained in the following sections.
To design the views in Developer Studio , add Panels within Panel Holder, and then add fields to the Panels. You can also use nested panels and appropriately place fields within. Panels and Panel Holders create a layout for the Mid Tier . The following options are available for the Layout Style property:
- Container panel – Occupies the entire view port (100% screen width).
- Sub-panel – Holds sections. On mobile devices, occupies the entire width and is displayed as tabs.
- Section panel – Holds fields or nested sections.
- Fixed panel – Holds a section. Aligns to the bottom of a screen.
The following diagram illustrates a sample UI layout of Progressive Views:
The responsive design automatically adjusts the Panels.
Positioning elements on the screen
Use the twelve-column layout to position elements horizontally on the screen. The following image illustrates the twelve-column layout:
A Remedy developer can implement the preceding twelve-column layout by using developer-friendly properties that are added in Developer Studio . Refer to the following example:
If you want to create a three-column layout, define the custom CSS style as follows:
- Panel 1 - 4
- Panel 2 - 4
- Panel 3 - 4
This CSS style creates a layout as shown in the following illustration:
On a mobile UI, this layout is oriented differently as shown in the following illustration:
Comments
Please review the article, because the sections: This CSS style creates the following layout and On a mobile UI, this layout looks as follows seem that are not correcty visualized, a grey zone appears.
Thanks for the feedback, Jesus. This is just an illustration but I have removed the grey zone.
Regards,
Chaitanya
Log in or register to comment.