Tab Bar

​

Overview

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

​

Tab Bar Properties

​

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. Choose any SF Symbol or upload a custom PNG (24 x 24px @3x size).

​

Selected Icon

Choose the icon that will display when this tab is selected. Choose any SF Symbol or upload a custom PNG (24 x 24px @3x size).

​

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.

​

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 an Open Page action. More on this below.

​

More Menu

The more menu will appear when you right click an item on macOS. The more menu lets you duplicate and delete an item in addition to editing the object’s badge.

​

Label Style

Select the Type style for the tab bar items. Any Type style, System Style, or custom font can be used.

​

Customize

​

Blur Effect

Add a blur or system material to the tab bar’s background with the Blur Effect property.

​

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.

​

Managing Tab Bar Items

To delete or duplicate a tab bar item, right-click on the item in the tab bar panel.

​

Tab Bar Interactions

You can add functionality to the tab bar items by linking them to other pages, or, for more custom interactions, linking actions and using a Custom Event trigger. To link pages, you’ll click on the chain link icon on the right side of each bar item. On the drop-down that appears, you’ll see a list of every page in your project. You can select any of those pages, and when a user taps that bar item, it will open the selected page exactly as a default Open Page action would. To create a custom interaction when the user taps a bar item, you’ll want to assign the bar item an event. To do this, you’ll still click on the chain link icon, but you’ll instead go down to the “Trigger Event” option. On the secondary drop-down that appears, you can select an existing event or create a new one. Once you have the bar item connected to an event, go into Interaction Mode and add a Custom Event trigger to the page. Select the same event, add actions, and play!

​

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.