MeeGo 1.2 Harmattan Developer Documentation Develop for the Nokia N9

QML TabButton Element

Button Component for TabBars More...

Inherits Button

This element was introduced in qt-components 4.7.


Detailed Description

The TabButton class provides correct styling for a tab button. It is used together with the ToolBarLayout and TabGroup.

 ToolBarLayout {
     ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
     ButtonRow {
         style: TabButtonStyle { }
         TabButton {
             text: "Tab1"
             tab: tab1
         TabButton {
             text: "Tab2"
             tab: tab2
         TabButton {
             text: "Tab3"
             tab: tab3

When TabGroup is used, items inside the TabGroup must have the same id names as the TabButton tabs have. When Tab1 is pressed tab1 is shown, in next example that is a new PageStack.

For example:

 TabGroup {
     id: tabGroup

     currentTab: tab1

     PageStack {
         id: tab1
     PageStack {
         id: tab2
     Page {
         id: tab3
         Column {
             spacing: 10

             Text {
                 text: "This is a single page"

Property Documentation

platformStyle : bool

Platform specific property to define the style of the button.

tab : bool

Tab associated to the given TabButton.