Tabris.js Widgets: Tab

Tabs allow the user to toggle quickly between different sections of an app. This UI element (or widget) is very useful for navigation.

The Tab is a Composite widget (the Tab class extends the Composite class). This means a tab can have children; it ’holds’ other UI elements. A Tab might display a simple TextView, or it might hold more complex widget hierarchies that can be navigated from within the Tab.

Let’s make some Tabs. First, we create a TabFolder. The TabFolder groups the Tabs together and oversees switching between them. A Tab can only be appended to a parent of type TabFolder and must have a TabFolder parent to render.

The TabFolder tabBarLocation property determines what kind of Tabs we create.

Tabs along the bottom of the screen (tabBarLocation: ‘bottom’) have more options and can have images and badges. These tabs might be used as primary navigation. Tabs positioned along the top of the screen (tabBarLocation: ‘top’) are simpler, do not display badges, and only show images on Android.

Let’s go ahead and add a Tab to the Tab Folder.

Now we can switch between three Tabs. They highlight when we press on them, but they contain nothing. We see only blank screens. Let’s put some text in Tab 3.

We can also add multiple pages to a Tab (see the navigationview-tabfolder.js snippet in the playground). Pages are composite widgets too. Having added multiple pages to a Tab, we can add multiple widgets to each page.

We can also take advantage of event listeners bound to our Tabs. onAppear() fires whenever a Tab comes into view (when it’s selected). This code causes an alert to open every time the user navigates to the second Tab.

To sum up: Tabs go in TabFolders, many other widgets can go in a Tab.

The above is just a small portion of the methods and properties available with the Tab widget. See the documentation for more details.