1 files changed, 57 insertions, 0 deletions
diff --git a/examples/declarative/ui-components/tabwidget/TabWidget.qml b/examples/declarative/ui-components/tabwidget/TabWidget.qml
new file mode 100644
index 0000000..26d25b4
--- /dev/null
+++ b/examples/declarative/ui-components/tabwidget/TabWidget.qml
@@ -0,0 +1,57 @@
+import Qt 4.7
+
+Item {
+    id: tabWidget
+
+    property int current: 0
+    default property alias content: stack.children
+
+    onCurrentChanged: setOpacities()
+    Component.onCompleted: setOpacities()
+
+    function setOpacities()
+    {
+        for (var i = 0; i < stack.children.length; ++i) {
+            stack.children[i].opacity = i == current ? 1 : 0
+        }
+    }
+
+    Row {
+        id: header
+        Repeater {
+            delegate: Rectangle {
+                width: tabWidget.width / stack.children.length; height: 36
+
+                Rectangle {
+                    width: parent.width; height: 1
+                    anchors { bottom: parent.bottom; bottomMargin: 1 }
+                    color: "#acb2c2"
+                }
+                BorderImage {
+                    anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
+                    border { left: 7; right: 7 }
+                    source: "tab.png"
+                    visible: tabWidget.current == index
+                }
+                Text {
+                    horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
+                    anchors.fill: parent
+                    text: stack.children[index].title
+                    elide: Text.ElideRight
+                    font.bold: tabWidget.current == index
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: tabWidget.current = index
+                }
+            }
+            model: stack.children.length
+        }
+    }
+
+    Item {
+        id: stack
+        width: tabWidget.width
+        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
+    }
+}