Demonstrate "container" type objects.

2 files changed, 71 insertions, 0 deletions

diff --git a/examples/declarative/tabwidget/TabWidget.qml b/examples/declarative/tabwidget/TabWidget.qml
new file mode 100644
index 0000000..c56f41e
--- /dev/null
+++ b/examples/declarative/tabwidget/TabWidget.qml
@@ -0,0 +1,42 @@
+import Qt 4.6
+
+Item {
+    id: page
+    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: page.width / stack.children.length
+                    height: 15
+                    color: page.current == index ? "grey" : "lightGrey"
+                    Text {
+                        anchors.fill: parent
+                        text: stack.children[index].title
+                        elide: Text.ElideRight
+                    }
+                    MouseRegion {
+                        anchors.fill: parent
+                        onClicked: page.current = index
+                    }
+                }
+            model: stack.children.length
+        }
+    }
+    Item {
+        id: stack
+        anchors.top: header.bottom
+        anchors.bottom: page.bottom
+        width: page.width
+    }
+}
diff --git a/examples/declarative/tabwidget/tabs.qml b/examples/declarative/tabwidget/tabs.qml
new file mode 100644
index 0000000..54ed7df
--- /dev/null
+++ b/examples/declarative/tabwidget/tabs.qml
@@ -0,0 +1,29 @@
+import Qt 4.6
+
+TabWidget {
+    id: tabs
+    width: 200
+    height: 200
+    current: 2
+    Rectangle {
+        property string title: "Red"
+        color: "red"
+        anchors.fill: parent
+        Text { anchors.centerIn: parent; text: "<div align=center>Roses are red"; font.pixelSize: 24
+            wrap: true; width: parent.width-20 }
+    }
+    Rectangle {
+        property string title: "Green"
+        color: "green"
+        anchors.fill: parent
+        Text { anchors.centerIn: parent; text: "<div align=center>Flower stems are green"; font.pixelSize: 24;
+            wrap: true; width: parent.width-20 }
+    }
+    Rectangle {
+        property string title: "Blue"
+        color: "blue"
+        anchors.fill: parent
+        Text { anchors.centerIn: parent; text: "<div align=center>Violets are blue"; color: "white"; font.pixelSize: 24
+            wrap: true; width: parent.width-20 }
+    }
+}