To Parabeac Nest to produce the highest quality code upon conversion, the Bottom Navigation will also need four simple steps.
We will use the bottom navigation design below which includes the following icons: home, start, trophy, message, education and a background rectangle.
We will first group all our elements that compose our Tab Bar. The name of the group is not imporant. For our example, we will name the group "bottomNav".
We will now need to add a
<tabbar> tag to the name of our header group.
We now need to add
<tab> tags to each of icons inside our tab bar.
Note: do not add a
<tab> tag to the background rectangle.
Lastly, if your tab bar contains a background element we will need to add a
<background> tag. If your design does not have a background rectangle, one will need to be added.
Note: the name of the background rectangle is not important as long as the
<background> tag is added.
That's it! Your bottom navigation bar is now optimized to produce the most efficient code possible.