QML TabButton Element

Button Component for TabBars More...

Inherits Button

This element was introduced in qt-components 4.7.

• List of all members, including inherited members

Properties

• platformStyle : bool
• tab : bool

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