Tabs QML Type

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. This component is DEPRECATED. See http://design.lomiri.com/apps/patterns/navigation. More...

• List of all members, including inherited members
• 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 Lomiri.Components 1.3
import Lomiri.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"
                }
            }
        }
        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 Lomiri.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