Overview
The Mobile layout allows you to separate the app's content into two sections on mobile devices. It allocates 60% of the space to the main content, while the remaining 40% is dedicated to the detailed content accessible through a sliding tab.
In this type of layout, you can assign a specific number of columns to each Section, and you can add rows to the Section as you see fit.
Add row
In this type of layout, you can add a Row to the main content Section, to the secondary content Section, or to both sections.
To add a Row, click the Add Row button, located at the bottom of the Section container.
The result of this operation is as follows. As you can see, the new Row is located only in the Section where you clicked the Add Row button.
If you want to add a Row to the other Section, click the Add Row button, located at the bottom of the Section container where you did not add a row.
In this way, you would have added rows to both sections.
Add Column
In the Mobile layout type, you can add Column containers to both the main content Section and the secondary content Section. The number of columns you can add depends on whether it is the main content Section or the secondary content Section.
Main content Section
In this Section, you can add from 1 Column container up to 3 Column containers.
To do this, click the Row container of the main content Section, select the Layout option, and under the Presets label, you can configure the number of columns you want to add.
Secondary content Section
In this Section, you can add from 1 Column container up to 2 Column containers.
To do this, click the Row container of the secondary content Section, select the Layout option, and under the Presets label, you can configure the number of columns you want to add.
Bottom sheet
In your published app, the secondary content configured in the 40% column of the viewport, is shown from the bottom of your screen as a drop-down container. This container is called the Bottom sheet.
How to use
To use the bottom sheet in your app follow the next steps:
1.Open your app on a mobile device.
2.Once you enter or when you scroll upwards a small container with the Expand label will appear at the bottom of your screen. Tap this container to open your Bottom sheet.
Finally, you're now able to view the Controls configured in the 40% column of your app.
Last Updated 6/4/2024 8:41:49 PM