Qt Reference Documentation

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

    Signals

    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.