TabBar QML Type

A bar with icons allowing to switch between different views or subtasks. More...

Import Statement: import QtQuick.Controls 2.0
Since: Qt 5.7
Inherits:

Container

Properties

Detailed Description

TabBar provides a tab-based navigation model.

TabBar is populated with TabButton controls, and can be used together with any layout or container control that provides currentIndex -property, such as StackLayout or SwipeView


  TabBar {
      id: bar
      width: parent.width
      TabButton {
          text: qsTr("Home")
      }
      TabButton {
          text: qsTr("Discover")
      }
      TabButton {
          text: qsTr("Activity")
      }
  }

  StackLayout {
      width: parent.width
      currentIndex: bar.currentIndex
      Item {
          id: homeTab
      }
      Item {
          id: discoverTab
      }
      Item {
          id: activityTab
      }
  }

See also TabButton, Customizing TabBar, Navigation Controls, and Container Controls.

Property Documentation

position : enumeration

This property holds the position of the tab bar.

Note: If the tab bar is assigned as a header or footer of ApplicationWindow or Page, the appropriate position is set automatically.

Possible values:

ConstantDescription
TabBar.HeaderThe tab bar is at the top, as a window or page header.
TabBar.FooterThe tab bar is at the bottom, as a window or page footer.

The default value is style-specific.

See also ApplicationWindow::header, ApplicationWindow::footer, Page::header, and Page::footer.