TabViewStyle QML Type

Provides custom styling for TabView More...

Import Statement: import QtQuick.Controls.Styles 1.4
Since: Qt 5.1

Properties

Detailed Description


  TabView {
      id: frame
      anchors.fill: parent
      anchors.margins: 4
      Tab { title: "Tab 1" }
      Tab { title: "Tab 2" }
      Tab { title: "Tab 3" }

      style: TabViewStyle {
          frameOverlap: 1
          tab: Rectangle {
              color: styleData.selected ? "steelblue" :"lightsteelblue"
              border.color:  "steelblue"
              implicitWidth: Math.max(text.width + 4, 80)
              implicitHeight: 20
              radius: 2
              Text {
                  id: text
                  anchors.centerIn: parent
                  text: styleData.title
                  color: styleData.selected ? "white" : "black"
              }
          }
          frame: Rectangle { color: "steelblue" }
      }
  }

Property Documentation

[read-only] control : TabView

The ScrollView this style is attached to.


frame : Component

This defines the tab frame.


frameOverlap : int

This property holds the amount of overlap there are between individual tab buttons and the frame.


leftCorner : Component

This defines the left corner.


rightCorner : Component

This defines the right corner.


tab : Component

This defines the tab. You can access the tab state through the styleData property, with the following properties:

readonly property int styleData.indexThis is the current tab index.
readonly property bool styleData.selectedThis is the active tab.
readonly property string styleData.titleTab title text.
readonly property bool styleData.nextSelectedThe next tab is selected.
readonly property bool styleData.previousSelectedThe previous tab is selected.
readonly property bool styleData.pressedThe tab is being pressed. (since QtQuick.Controls.Styles 1.3)
readonly property bool styleData.hoveredThe tab is being hovered.
readonly property bool styleData.enabledThe tab is enabled. (since QtQuick.Controls.Styles 1.2)
readonly property bool styleData.activeFocusThe tab button has keyboard focus.
readonly property bool styleData.availableWidthThe available width for the tabs.
readonly property bool styleData.totalWidthThe total width of the tabs. (since QtQuick.Controls.Styles 1.2)

tabBar : Component

This defines the tab bar background.


tabOverlap : int

This property holds the amount of overlap there are between individual tab buttons.


tabsAlignment : int

This property holds the horizontal alignment of the tab buttons. Supported values are:

  • Qt.AlignLeft (default)
  • Qt.AlignHCenter
  • Qt.AlignRight

tabsMovable : bool

This property holds whether the user can move the tabs. Tabs are not movable by default.