Tabs

The appframework.swc library, has been created to simplify the use of tabs in your application. Download the appframework.swc file from GitHub.

You can use a TabbedPane to manage multiple screens in your app and let users navigate between the screens. A TabbedPane stores screens as a set of tabs that are located at the bottom of the screen, in the same area where actions are displayed. Users can tap a tab to display the associated screen. Only the screen that's associated with the currently selected tab is displayed, and the others are hidden.

A Tab represents an individual screen in a TabbedPane. A Tab can include a Page or NavigationPane as its content, each of which can have their own content and actions associated with them.



TabbedPane includes properties that specify the set of tabs in the TabbedPane (the tabs property) and the tab that's currently displayed (the activeTab property). A TabbedPane also includes the events that are emitted when tabs are added or removed, and when the active tab changes.

To specify how a tab appears at the bottom of the TabbedPane, you can use various properties of Tab and its superclass, onAdded. For example, you can use the title property to set the name of the tab, or specify an image to display with the name of the tab.

The tab menu contains all of the tabs in the TabbedPane, even the ones that did fit on the action bar, if you add more tabs than can fit on the action bar (more than four tabs), the tab menu is created automatically.. When the tab menu is added, the left-most tab on the action bar becomes a button that opens the tab menu, leaving three other tabs displayed on the action bar.



The tabs that you add to a TabbedPane appear at the bottom of the screen. This area also contains actions that are associated with the screen that's currently displayed. When you use a TabbedPane and one of the screens includes actions, these actions are displayed to the right of the tabs at the bottom of the screen.

If the screen includes a single action on the action bar, that action is displayed to the right of the tabs.



If the screen includes more than one action, the actions appear in the action menu to the right of the tabs. Users can tap the action menu button to display the action menu for that screen.



For more examples of tabs, and their features, check out the tabbedpane sample included as part of the appframework sample on GitHub.