TabFolder
This widget can switch between Tabs. It extends Composite class, and its child widgets can only be Tabs. TabFolder does not compute its size, meaning that its width and height must be defined by the respective layout properties (e.g., either width or left and right must be specified). Property tabBarLocation determines the position of the TabFolder bar. It can be changed only on widget creation. The property accepts values of top, bottom, hidden, and auto. If set to hidden, make sure to allow paging. Otherwise, you won’t be able to switch between tabs.
Here is how the simple TabFolder looks in JS syntax:
|
1 2 3 4 5 6 |
import { Tab, TabFolder, contentView } from 'tabris'; new TabFolder({ layoutData:"stretch" }) .append(new Tab({ title: 'First' })) .append(new Tab({ title: 'Second' })) .appendTo(contentView); |
And the same example in JSX:
|
1 2 3 4 5 6 7 8 |
import { Tab, TabFolder, contentView } from 'tabris'; contentView.append( <TabFolder stretch> <Tab title='First' /> <Tab title='Second' /> </TabFolder> ); |
By using selectionIndex property, you can decide which tab will be selected initially. And paging property allows swiping between the tabs. Run the example below using QR code to see the swipe in action:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { contentView, Tab, TabFolder, TextView } from 'tabris'; contentView.append( <TabFolder paging stretch selectionIndex={1} tabBarLocation='bottom'> <Tab title='Cart' image='resources/cart@2x.png' selectedImage='resources/cart-filled@2x.png'> <TextView center>Content of Tab Cart</TextView> </Tab> <Tab title='Pay' image='resources/card@2x.png' selectedImage='resources/card-filled@2x.png' badge={5}> <TextView center>Content of Tab Pay</TextView> </Tab> <Tab title='Statistic' image='resources/chart@2x.png' selectedImage='resources/chart-filled@2x.png'> <TextView center>Content of Tab Statistic</TextView> </Tab> </TabFolder> ); |
For more detailed information about the widget, use the TabFolder documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
