Layout of your app
Last updated
Was this helpful?
Last updated
Was this helpful?
Appeggio has hundreds of different responsive parts, page sections, and full pages, all designed to make laying out your app as straightforward as possible.
, are all helpful parts to set up the structure of your pages if you're building them from scratch, or adding new sections to already existing layout pages.
Other parts that can assist with your layout include (the top navigation bar), , side , and . There are numerous premade page sections and full pages you can add to your app. All are easily linked.
All parts and sections can be moved to the left or right, up or down, depending on the part or section, and where it has been placed. This is achieved by selecting the part and using the arrow keys in the property editing panel.
Below is a very short video (less than a minute), that shows adding a preconfigured landing page, and changing the order of one of the sections by selecting the container it is in, and using the arrow key in the property editing panel, to move it up. The video also shows how easy it is to change the background color of a section within the same page to highlight a distinction between the sections. Press play to watch the video.
Most parts within Appeggio can be put into another container. You might be wondering why that would be necessary.
It all comes down to how you want to display and format the part. You might have a part that would be better suited in a column so that you can set the width and position of the column. Or it might be that you want a part (or section) placed into a row, into a card, or a form, container, or group.
Some parts have additional options they can be contained in. For example, a button can also be contained in a card actions part, an alert, a join, and a choice.
Below is an example of a timeline being added to a container. The timeline is then 'contained in' a row. The row can then be horizontally aligned to the center. The row can then be formatted however you like.
The direction of a part or its contents can be changed if it supports the 'Direction' property. The direction property allows you to select the part and alter the direction of the children within it. For example, if you have contents in a row, you can make them appear as though they are in a column, and vice versa. You can also reverse the contents.
In the example below, a row of logos has been selected. Selecting Direction > Row Reverse results in the contents of the row being reversed. Selecting Direction > Column results in the contents of the row being stacked on top of each other, mimicking a column. Column Reverse results in the contents being stacked on top of each other in reverse order. 'Default' puts the contents back into their original place.
The Direction property applies to the following parts: rows, columns, containers, card actions, groups, panels, joins, menus, and timelines.
You can change the 'slot' where your part appears so that it is either prepended (moved to the beginning) or appended (moved to the end).
An example of changing the slot position might be positioning an icon within a button.
To change the position of an icon within the button, select the icon, and go to Slot Position. You'll see there is the ability to append or prepend the icon. Prepending the icon places it at the beginning, and appending the icon places it at the end.
The 'slot position' applies to many parts, including rows, columns, text, and many others. This means that changing the slot position for a part such as a row, moves the contents of the row with it.
