We show how to create this element of any app UI using the mobile footer. The same principle can be applied for other screen sizes and other locations of the menu.
For example, a footer menu in one of the apps fully built on Mobsted:
As you can see, the menu can fit most design requirements, can change design or color to show which page you are on, have icons of different sizing.
Watch it on Video or Follow the steps below:
Step 1 - Add FlexRow
All table-like designs are done using the Flex Row.
Step 2 - Set FlexRow's Toolbar property
You can choose between top and bottom toolbar locations. In this case, go for the Bottom:
You will see this Property also appear in your Components Tree on the left of Constructor pane:
Step 3 - Add and Edit Columns
Create a needed amount of columns in FlexRow component. Note that cells in a horizontal FlexRow means columns:
Press + ADD ITEM ↑
You can change the width of any cell - click any CELL to edit CELL's properties:
NOTE that Mobsted uses standard 12 column screen width!
So when you select 4, as shown ↑, you can have this cell/column equal to 2 more columns 4+4+4=12, or you can set any cell to take more or less width compared to other cells.
Step 4 - Add Button to the Cell
Drag and drop a button from Left panel to the needed cell, using Tree or directly to the screen.
Step 5 - Change Button's Icon and Design
You can edit any visual properties of the button as with usual buttons
To change an icon, click the "?" as shown below.
You will see the library with icons. Search by icons meaning there:
When the right icon is found. Copy it's HTML code:
Insert the icon code into the Icon class field, as marked ↓:
You will see your button change right away. If we want to keep just an icon - clear the Caption field, marked blue ↑.
You will also see several new fields below, which you can change based on your needed design:
If you want to change the color of the icon, go to the View panel and find in Typography (because the icon is technically a form of a text) and edit Color:
Step 6 - Repeat Steps 4 & 5 for All Cells
Do not forget to add Goto actions, or any other actions, which you need menu buttons to perform.
Step 7 - Use the Same Menu to Other Screens
You can move the same menu to other screens with the same design. Select the FlexRow which contains the menu and "Copy to buffer" then paste it with standard CTRL+V on any other screen.
The Copy to Buffer function automatically created a change-protected DESIGN of the copied set, but you can change any parts of it without affecting other pages.
For example, change the color or the icon for the active page, or size of an icon on the active page, or change the number of cells on any page. Etc.
Thats all.
Tell us if you need more options in setting up the menu.