Qt Quick Components

TabBar

Symbian: A TabBar provides a themeable background for a TabBarLayout. More...

  • List of all members, including inherited members
  • Properties

    Detailed Description

    The TabBar is a Symbian specific component that you can use as a container for the tab buttons instead of TabBarLayout. It functions the same as the tab bar layout but is themed in a Symbian device style.

    Using a tab bar

    The following code snippet shows a tab bar with three buttons and corresponding tab content pages.

     Window {
         height: 350
         width: 350
    
         // define a property that refers directly to the TabBarLayout item of the tab bar
         property alias tabBarLayout: tabBar.layout
    
         // 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"
             }
         }
    
         // add the tab content items to the tab group
         Component.onCompleted: {
             tabGroup.addTab(tab1content)
             tabGroup.addTab(tab2content)
             tabGroup.addTab(tab3content)
         }
     }

    See also TabBarLayout and TabButton.

    Property Documentation

    defaultcontent : list<QtObject>

    This is a short-cut to set the children for the layout property.


    layout : TabBarLayout

    Layout which is the parent of the TabButton instances.