Tabbed navigation is a special kind of navigation where the user is presented with "tabs" always located at the bottom of the screen. Each tab then corresponds to one screen.
When you have imported a design that contains tab bar already, you can use Supernova to analyze its content and properly configure all the properties for you. You do that by selecting tab bar component, right-clicking it and selecting
Convert to Tab Bar > Create New Tab Group.
In order to have the tab bar properly created, all items needs to be grouped together. You then convert the top-most group, and Supernova takes care of the rest - creating items out of every subgroup that contains any content. The example above shows how to properly group the content so it gets recognized properly.
You can also notice that after creating the tab bar, only one icon/text remains and the rest is gone.
That is because Supernova took the first icon and text and assigned it to the first screen. There are no connected screens to that tab bar just yet, so even in live mode, you'll only see one icon. Let's add another connected screen. You can do that by selecting the tab bar again (this time, on a different screen) and choosing the second option
Convert to Tab Bar > Connect to Existing Group > Tab Group 1.
This connects the second screen to the tab bar you created previously. You'll still see just one icon in preview mode - the icon of the current screen. However, when switched to live mode, tab bar will show 2 items, with the second one selected.
Tab Bar Limit
There is a limit of 5 items in the tab bar and you'll not be able to add any more after that. This is to avoid the native behavior where items after the fifth one are added to
...menu on the right.
You can also create a tab bar without the design component. In that case, a default tab bar will be created containing only one item with placeholder text. You can do that from navigation map by selecting the screen you wish to embed in tab bar, right-clicking it and selecting
embed in tab bar option.
Tab bar style is governed by the tab bar itself. Tab Bars always recolor the items inside to specified set of colors for both texts and images. You can use the following attributes to style the tab bar properly:
Item Font- Font of the item texts in all states
Text Color- Color of item texts when the screen is not selected
Selected Text Color- Color of item texts when the screen is selected
Image Color- Color of item icons when the screen is not selected
Selected Image Color- Color of item icons when the screen is selected
Background Color- Background color of the tab bar
When a screen contains a tab bar, it will have exactly one item that is then used throughout the app. You can configure what will be shown by scrolling down the list of components for that screen and locating
bottom tab bar. The bottom tab bar will have exactly one item with following configuration:
Text- Text for the current screen
Image- Image/Icon for the current screen
Screens are added in the order of conversion. However, you can reorder them easily by moving them inside the screen selection panel. The tabs are shown from top to bottom where the left-most item corresponds to the top-most screen in the tab bar group.
Updated almost 3 years ago