QML TabBar Element

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

Inherits Item

List of all members, including inherited members

Properties

• content : list<QtObject>
• layout : TabBarLayout

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.0

 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