A tab bar is a navigational element that lets you switch between different pages of content in the same view. Tab bars in Play are built as a property of the page. You can choose to add the tab bar to some pages and not to others, but the tab bar will be consistent across any pages it is on.
Adding a Tab Bar
macOS
In macOS, turn the tab bar on in the attribute panel titled Navigation. Click the pop-up icon to customize all properties.
iOS
On iOS, flip the Tab Bar property switch in the Navigation tab of the attribute panels.
Items
Each "item" is a different tab. The Items property includes several sub-properties that customize different parts for each item.
Default Icon
Choose the icon that will display by default when this tab is not selected.
Selected Icon
Choose the icon that will display when this tab is selected.
Title
Enter the tab's title using the text field. You can leave this empty if you would like a tab bar with icons only.
More Menu
The more menu will appear as you hover over an item on macOS. The more menu lets you duplicate and delete an item in addition to editing the object's badge.
Edit Badge
To add a badge to any of the icons, select "Edit Badge" and type the desired content (ie. the number of notifications) into the popup. Leaving the text field blank will remove the badge.
Link
Select the page that this tab should navigate to. This link will function as a Go To Page action.
Blur Effect
Add a blur or system material to the tab bar's background with the Blur Effect property.
Customize
Selected
Choose the color of the selected tab's icon and title from your color styles.
Unselected
Choose the color of the unselected tabs' icons and titles.
Bar Fill
Choose the color to tint the tab bar's background.
Item Position
Choose how the items are spaced within the tab bar. When "Centered" is selected, another property will appear called Item Width which lets you control the space between items.
Title Gap
Adjust the gap between each item's image and title.
Custom Tab Bars
If your proposed tab bar doesn't match the native iOS tab bar, you can still create it in Play! You'll use components with two states for each of the tab bar items and pin the full tab bar stack to the bottom of the page. Check out this short video to see exactly how to make your own tab bar in Play.