Provides custom styling for TabView. More...

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


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.index This is the current tab index.
readonly property bool styleData.selected This is the active tab.
readonly property string styleData.title Tab title text.
readonly property bool styleData.nextSelected The next tab is selected.
readonly property bool styleData.previousSelected The previous tab is selected.
readonly property bool styleData.pressed The tab is being pressed. (since QtQuick.Controls.Styles 1.3)
readonly property bool styleData.hovered The tab is being hovered.
readonly property bool styleData.enabled The tab is enabled. (since QtQuick.Controls.Styles 1.2)
readonly property bool styleData.activeFocus The tab button has keyboard focus.
readonly property bool styleData.availableWidth The available width for the tabs.
readonly property bool styleData.totalWidth The 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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support