Tabbar menu design

In this learning content, we will prepare the tabbar menu design that we will use on mobile application screens and will provide the transition between screens.

Before starting the application, let's examine the sample tabbar menu design that we will complete at the end of the learning content.

Basically, when we examine the element tree, we see the row element added inside the Footer element. Row element is used in a 3-column structure. When we look at the columns, we see Icon and Label elements added inside the Vertical Stack element. A vertical Stack element is a container-type element in which the vertical spacing of 2 or more elements can be adjusted. With the Icon element, you can select the icon you need from the icon library. In this Tabbar menu design, an icon representing the Dashboard is used for the first column, and the screen name is written under the icon. When we look at the second column, an icon representing the List screen is used in the same way, and the name of the list screen is written. In the last column, an icon representing the user profile is used, and the name of the Profile screen is written.

Now, let's prepare a similar Tabbar Menu design together.

1. Create a new mobile-compatible app.
2. On the screen that opens, remove the default Row and drag and drop the Footer element from the Elements panel. We use the Footer element because we want the menu to stay fixed on the edge when the screen is scrolled.
3. Drag and drop a Row element into the Footer element you added. We will continue using the Row element in a 3-column structure.
4. With the Row element selected, remove the Row ready-made style in the Styling panel > Layout> Styles and add the None ready-made style.
5. Then, add a Vertical Stack element in the first column.
6. Drag and drop an icon and label element into the Vertical Stack element, respectively.
7. With the Vertical Stack element selected, center the elements inside the Vertical Stack element horizontally via Styling panel > Layout>Alignment.
8. With Column, the parent of Vertical Stack selected, use Styling panel > Layout > Alignment to center the elements in the column horizontally.
9. Then, select the icon element and select the icon from the icon library in the Properties panel.
10. While the icon is selected, give a padding of 8 Pixels in 4 directions from Styling panel > Layout > Padding.
11. Then, change the color of the icon in the Styling panel > Text.
12. Again, with the icon element selected, change the background color of the icon from Styling panel > Fill.
13. Give the icon a Radius of 4 Px in 4 directions from the Border area.
14. Then select the Label element and enter "Dashboard" by clicking on it twice.
15. While the Label element is selected, remove the Paragraph preset style and add the H6 preset style from the Styling panel > Text section.
16. Again, change the text color through the Text section.
17. Now select the Vertical Stack in the first column via BreadCrumb.
18. Duplicate the Vertical Stack.
19. Drag and drop the new Vertical Stack to the second column.
20. Select the icon element in the second column and change the icon via the icon library in the Properties panel.
21. Then, change the color of the icon in the Styling panel > Text.
22. Then, change the background color of the icon in the Styling panel > Fill.
23. Then select the Label element and enter the phrase "Employee List" by clicking on it twice.
24. Change the color of the text in the Styling panel > Text.
25. Similar to what we just did, select the Vertical Stack in the second column via BreadCrumb and Duplicate it.
26. Drag and drop the new Vertical Stack to the third column.
27. Select the icon element in the third column and change the icon via the icon library in the Properties panel.
28. Change the color of the icon in Styling panel > Text and the background color of the icon in Styling panel > Fill.
29. Then select the Label element and enter "Profile" by clicking on it twice.

You are now ready.