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.