QML TabButton Element

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

Inherits Item

List of all members, including inherited members

Properties

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

Signals

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.

read-onlyiconSource : url

The URL for an image to be shown on the button. The default value is an empty string.

read-onlypressed : 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.

read-onlytext : string

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

Signal Documentation

TabButton::clicked ()

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

Components Topics

Guides

API Reference

Contents