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

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-onlycurrentPage : Item

The page of the currently selected tab.


read-onlyselectedTab : Tab

This documentation is under development and is subject to change.

The currently selected tab.


selectedTabIndex : int

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.


tabBar : TabBar

The TabBar that will be shown in the header and provides scrollable tab buttons.


defaulttabChildren : list<Item>

Children are placed in a separate item that has functionality to extract the Tab items.


Signal Documentation

Tabs::modelChanged()

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.