6 files changed, 132 insertions, 0 deletions
diff --git a/doc/src/declarative/pics/ListViewHorizontal.png b/doc/src/declarative/pics/ListViewHorizontal.png
index 63c7c86..4633a0e 100644
--- a/doc/src/declarative/pics/ListViewHorizontal.png
+++ b/doc/src/declarative/pics/ListViewHorizontal.png
diff --git a/doc/src/declarative/pics/ListViewSections.png b/doc/src/declarative/pics/ListViewSections.png
new file mode 100644
index 0000000..9270126
--- /dev/null
+++ b/doc/src/declarative/pics/ListViewSections.png
diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/trivialListView.png
index 175e455..3782570 100644
--- a/doc/src/declarative/pics/trivialListView.png
+++ b/doc/src/declarative/pics/trivialListView.png
diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
new file mode 100644
index 0000000..302dfd2
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
@@ -0,0 +1,18 @@
+<!--
+ListModel allows free form list models to be defined and populated.
+Be sure to name the file the same as the id.
+-->
+<ListModel id="ContactModel">
+    <Contact>
+        <name>Bill Smith</name>
+        <number>555 3264</number>
+    </Contact>
+    <Contact>
+        <name>John Brown</name>
+        <number>555 8426</number>
+    </Contact>
+    <Contact>
+        <name>Sam Wise</name>
+        <number>555 0473</number>
+    </Contact>
+</ListModel>
diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml
new file mode 100644
index 0000000..d8bbb22
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/highlight.qml
@@ -0,0 +1,59 @@
+Rect {
+    width: 180
+    height: 200
+    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: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [0]
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            width: 180
+            height: 40
+            color: "lightsteelblue"
+            radius: 5
+            y: Follow {
+                source: List.current.y
+                spring: 3
+                damping: 0.1
+            }
+        }
+    }
+    ListView {
+        id: List
+        width: 180
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        autoHighlight: false
+        focus: true
+    }
+//! [1]
+}
diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml
new file mode 100644
index 0000000..5b99bbd
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/listview.qml
@@ -0,0 +1,55 @@
+//! [3]
+Rect {
+    width: 480
+    height: 40
+    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: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [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 list
+//! [2]
+    ListView {
+        width: 480
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        focus: true
+        orientation: 'Horizontal'
+    }
+//! [2]
+}
+//! [3]