Symbian: A TabBar provides a themeable background for a TabBarLayout. More...
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.
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.
layout : TabBarLayout |
Layout which is the parent of the TabButton instances.