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.
|
1 2 3 4 5 6 |
import {contentView, Tab, TabFolder, TextView} from ‘tabris'; //import the classes we need const tabFolder = new TabFolder({ left: 0, top: 0, right: 0, bottom: 0, tabBarLocation: ‘bottom’, }).appendTo(contentView); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const tab = new Tab({title: ‘My first Tab’, image: ‘resources/cart@2x.png}) .appendTo(tabFolder); We populate the Tab’s ‘title’ and ‘image’ properties in the constructor. Let's add a couple more: const tab2 = new Tab({title:’my second Tab, image: ‘resources/cart@2x.png}) .appendTo(tabFolder); const tab3 = new Tab({title:’my third Tab, image: ‘resources/cart@2x.png}) .appendTo(tabFolder); |
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.
|
1 2 3 4 5 6 7 |
new TextView({text:'Welcome to the third tab', centerX: 0, centerY:0}) .appendTo(tab3); We can keep adding widgets to our Tabs. Let’s throw in a button: new Button({text: 'Tab3 looking jazzy', centerX: 0, centerY:50 }) .appendTo(tab3); |
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.
|
1 2 3 |
tab2.onAppear(() => { new AlertDialog({ title: 'I am second Tab. I win with my alert' }).open(); }); |
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.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
