Tabs
The Tabs class provides an environment where multible Tab children can be added, and the user is presented with a tab bar with tab buttons to select different tab pages. More...
Inherits StyledItem
Properties
- currentPage : Item
- selectedTab : Tab (preliminary)
- selectedTabIndex : int (preliminary)
- tabBar : TabBar
- tabChildren : list<Item>
Signals
Detailed Description
Tabs must be placed inside a MainView so that it will automatically have a header that shows the tabs that can be selected, and the toolbar which contains the tools of the Page in the currently selected Tab.
See also the Design Guidelines on Tabs.
Example:
import QtQuick 2.0 import Ubuntu.Components 0.1 import Ubuntu.Components.ListItems 0.1 as ListItem MainView { width: units.gu(48) height: units.gu(60) Tabs { id: tabs Tab { title: i18n.tr("Simple page") page: Page { Label { id: label anchors.centerIn: parent text: "A centered label" } tools: ToolbarItems { ToolbarButton { text: "action" onTriggered: print("action triggered") } } } } Tab { id: externalTab title: i18n.tr("External") iconSource: "call_icon.png" page: Loader { parent: externalTab anchors.fill: parent source: (tabs.selectedTab === externalTab) ? Qt.resolvedUrl("MyCustomPage.qml") : "" } } Tab { title: i18n.tr("List view") page: Page { ListView { clip: true anchors.fill: parent model: 20 delegate: ListItem.Standard { icon: Qt.resolvedUrl("avatar_contacts_list.png") text: "Item "+modelData } } } } } }
As the example above shows, an external Page inside a Tab can be loaded using a Loader.
It is possible to use a Repeater to generate tabs, but when doing so, ensure that the Repeater is declared inside the Tabs at the end, because otherwise the shuffling of the order of children by the Repeater can cause incorrect ordering of the tabs.
The Navigation Patterns specify that a tabs header should never be combined with the back button of a PageStack. The only way to combine Tabs and PageStack that avoids this is by pushing the Tabs as the first page on the PageStack, and pushing other pages on top of that, as is shown in the following example:
import QtQuick 2.0 import Ubuntu.Components 0.1 MainView { id: mainView width: units.gu(38) height: units.gu(50) PageStack { id: pageStack Component.onCompleted: push(tabs) Tabs { id: tabs Tab { title: "Tab 1" page: Page { Button { anchors.centerIn: parent onClicked: pageStack.push(page3) text: "Press" } } } Tab { title: "Tab 2" page: Page { Label { anchors.centerIn: parent text: "Use header to navigate between tabs" } } } } Page { id: page3 visible: false title: "Page on stack" Label { anchors.centerIn: parent text: "Press back to return to the tabs" } } } }
Property Documentation
read-onlyselectedTab : Tab |
This documentation is under development and is subject to change.
The currently selected tab.
This documentation is under development and is subject to change.
The index of the currently selected tab. The first tab is 0, and -1 means that no tab is selected. The initial value is 0 if Tabs has contents, or -1 otherwise.
Children are placed in a separate item that has functionality to extract the Tab items.
Signal Documentation
Used by the tabs style to update the tabs header with the titles of all the tabs. This signal is used in an intermediate step in transitioning the tabs to a new implementation and may be removed in the future.