QML TabButton Element

Provides a tab button with an image or a label that the user can click. More...

This element was introduced in Qt Quick Components 1.0.

List of all members, including inherited members

Properties

checked : bool
iconSource : url
platformInverted : bool
pressed : bool
tab : Item
text : string

Signal Handlers

clicked

Detailed Description

A tabbed interface is made up of tab buttons and content for each button. A tab button is usually positioned by the TabBarLayout, but compatible with other QML positioning mechanisms such as Row or Column elements. When positioned in a ToolBar, the ButtonRow is used for positioning.

On the Symbian platform, a tab button can be also be positioned with the TabBar.

Using a Tab Button

When adding buttons to a layout, you need to associate a tab button with the content for the tab. You also set the text or image for the button. The code snippet below shows a TabBarLayout with three tab buttons. Each button has a text title and refers to the id of the tab content associated with the button.

 // define a tab bar layout with three buttons and link them to the content
 TabBarLayout {
     id: tabBarLayout
     anchors { left: parent.left; right: parent.right; top: parent.top }
     TabButton { tab: tab1content; text: "Tab 1" }
     TabButton { tab: tab2content; text: "Tab 2" }
     TabButton { tab: tab3content; text: "Tab 3" }
 }

See the TabGroup documentation for more information about creating a tabbed interface.

See also TabBarLayout, TabGroup, and TabBar.

Property Documentation

checked : bool

The value is true if this button is the button for the currently activated tab. Otherwise it is false.

This is a read-only property and therefore should not be manipulated by the user.

iconSource : url

The URL for an image to be shown on the button. The default value is an empty string. Icons are automatically coloured with theme colours. TabButton treats svg images as icons. Other image formats and images with http scheme are not colored.

platformInverted : bool

Symbian:

If platformInverted is true, the component is visualized with the inverted style. For more information, see Using Inverted Style with Symbian Components. By default platformInverted is false.

This property group was introduced in Qt Quick Components 1.1.

pressed : bool

The value is true if the user is currently pressing the tab button. Otherwise it is false.

This is a read-only property and therefore should not be manipulated by the user.

tab : Item

The reference to the tab content (one of the children of a TabGroup, usually a Page) that is activated when this TabButton is clicked.

Note: On some platforms there can be additional logic such as unwinding the page stack in a tab if the tab is already selected.

text : string

Text to be displayed on the button. The default value is an empty string.

Signal Handler Documentation

TabButton::clicked ()

This signal is emitted when this button is pressed and then released.

Components Topics

Guides

API Reference

Contents