# 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...

Import Statement: | import Lomiri.Components 1.3

- 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
    import Lomiri.Components.ListItems 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

    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-only] count : int

Contains the number of tabs in the Tabs component.

[read-only] currentPage : Item

The page of the currently selected tab.

[read-only] selectedTab : Tab

The currently selected tab.

selectedTabIndex : int

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.

[default] tabChildren : list<Item>

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