Qt Quick Components

TabButton

A tab button has an image or a label and can be clicked by the user to activate a tab. More...

  • List of all members, including inherited members
  • Properties

    Signals

    Detailed Description

    A tabbed interface is made up of tab buttons plus content for each button. A tab button is usually positioned using the TabBarLayout, but other QML positioning mechanisms such as Row or Column can be used instead.

    Symbian: 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 and/or image for the button. This code snippet shows a TabBarLayout set up with three tab buttons. Each button has a text title and refers to the id of the tab content to be 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

    \trueif this button is the button for the currently activated tab. Otherwise false.


    iconSource : url

    The URL for an image to show on the button. Defaults value is "".


    pressed : bool

    \trueif the user is currently pressing the tab button. Otherwise false.


    tab : Item

    This indicates the tab content (one of the children of a TabGroup) 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. Default value is "".


    Signal Documentation

    TabButton::clicked ()

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