GridView docs.

3 files changed, 68 insertions, 0 deletions

diff --git a/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml
new file mode 100644
index 0000000..accbc3e
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/dummydata/ContactModel.qml
@@ -0,0 +1,23 @@
+ListModel {
+    id: ContactModel
+    ListElement {
+        name: "Bill Smith"
+        number: "555 3264"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "Jim Williams"
+        number: "555 5673"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "John Brown"
+        number: "555 8426"
+        portrait: "pics/portrait.png"
+    }
+    ListElement {
+        name: "Sam Wise"
+        number: "555 0473"
+        portrait: "pics/portrait.png"
+    }
+}
diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml
new file mode 100644
index 0000000..0fca789
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/gridview.qml
@@ -0,0 +1,45 @@
+//! [3]
+Rect {
+    width: 240; height: 180; color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 80; height: 78
+            VerticalLayout {
+                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
+                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
+            }
+        }
+    }
+//! [0]
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            color: "lightsteelblue"
+            radius: 5
+        }
+    }
+//! [1]
+    // The actual grid
+//! [2]
+    GridView {
+        width: parent.width; height: parent.height
+        model: ContactModel; delegate: Delegate
+        cellWidth: 80; cellHeight: 80
+        highlight: Highlight
+        focus: true
+    }
+//! [2]
+}
+//! [3]
diff --git a/doc/src/snippets/declarative/gridview/pics/portrait.png b/doc/src/snippets/declarative/gridview/pics/portrait.png
new file mode 100644
index 0000000..fb5052a
--- /dev/null
+++ b/doc/src/snippets/declarative/gridview/pics/portrait.png