Qt Reference Documentation

QML TabBar Element

Symbian: Provides a styled background for a TabBarLayout. More...

This element was introduced in Qt Quick Components 1.0.

Properties

Detailed Description

TabBar is a Symbian-specific component that you can use as a container for the tab buttons instead of TabBarLayout. It has the same functionality as the tab bar layout but its appearance is based on the Symbian style.

Using a Tab Bar

The code snippet below defines a tab bar with three buttons and corresponding tab content pages.

 import com.nokia.symbian 1.1

 Window {
     height: 350
     width: 350

     // define a tab bar with three buttons and link them to the content
     TabBar {
         id: tabBar
         anchors { left: parent.left; right: parent.right; top: parent.top }
         TabButton { tab: tab1content; text: "tab1" }
         TabButton { tab: tab2content; text: "tab2" }
         TabButton { tab: tab3content; text: "tab3" }
     }

     // define a blank tab group so we can add the pages of content later
     TabGroup {
         id: tabGroup
         anchors { left: parent.left; right: parent.right; top: tabBar.bottom; bottom: parent.bottom }

         // define the content for tab 1
         Page {
             id: tab1content
             Text {
                 anchors.centerIn: parent
                 text: "Tab 1 content"
                 font.pointSize: 25
                 color: "white"
             }
         }

         // define the content for tab 2
         Page {
             id: tab2content
             Text {
                 anchors.centerIn: parent
                 text: "Tab 2 content"
                 font.pointSize: 25
                 color: "pink"
             }
         }

         // define content for tab 3
         Page {
             id: tab3content
             Text {
                 anchors.centerIn: parent
                 text: "Tab 3 content"
                 font.pointSize: 25
                 color: "cyan"
             }
         }
     }
 }

The screenshot below shows the result of the code snippet.

See also TabBarLayout and TabButton.

Property Documentation

defaultcontent : list<QtObject>

This is a short-cut to set the children for the layout property. Usually you do not need to directly access this property.


layout : TabBarLayout

Layout that is the parent of the TabButton instances. Use this as the parent for dynamically created buttons.


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.