Ubuntu.Components.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...

• Obsolete members

Properties

• count : int
• currentPage : Item
• selectedTab : Tab
• selectedTabIndex : int
• tabChildren : list<Item>

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.

Example:

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.ListItems 1.3 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")
page: Loader {
parent: externalTab
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
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 {
iconName: "compose"
text: "Item "+modelData
}
}
}
}
}
}

As the example above shows, an external Page inside a Tab can be loaded using a Loader. Note that setting the top anchor or the height of the Loader would override the Page height. We avoid this because the Page automatically adapts its height to accommodate for the header.

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.4
import Ubuntu.Components 1.3
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

Contains the number of tabs in the Tabs component.

The page of the currently selected tab.

The currently selected tab.

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.