1 files changed, 89 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml
new file mode 100644
index 0000000000..49483af572
--- /dev/null
+++ b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml
@@ -0,0 +1,89 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+//![0]
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    width: 800
+    height: 600
+    visible: true
+
+    TreeView {
+        id: treeView
+        anchors.fill: parent
+        anchors.margins: 10
+        clip: true
+
+        selectionModel: ItemSelectionModel {}
+
+        // The model needs to be a QAbstractItemModel
+        // model: yourTreeModel
+
+        delegate: Item {
+            implicitWidth: padding + label.x + label.implicitWidth + padding
+            implicitHeight: label.implicitHeight * 1.5
+
+            readonly property real indentation: 20
+            readonly property real padding: 5
+
+            // Assigned to by TreeView:
+            required property TreeView treeView
+            required property bool isTreeNode
+            required property bool expanded
+            required property int hasChildren
+            required property int depth
+            required property int row
+            required property int column
+            required property bool current
+
+            // Rotate indicator when expanded by the user
+            // (requires TreeView to have a selectionModel)
+            property Animation indicatorAnimation: NumberAnimation {
+                target: indicator
+                property: "rotation"
+                from: expanded ? 0 : 90
+                to: expanded ? 90 : 0
+                duration: 100
+                easing.type: Easing.OutQuart
+            }
+            TableView.onPooled: indicatorAnimation.complete()
+            TableView.onReused: if (current) indicatorAnimation.start()
+            onExpandedChanged: indicator.rotation = expanded ? 90 : 0
+
+            Rectangle {
+                id: background
+                anchors.fill: parent
+                color: row === treeView.currentRow ? palette.highlight : "black"
+                opacity: (treeView.alternatingRows && row % 2 !== 0) ? 0.3 : 0.1
+            }
+
+            Label {
+                id: indicator
+                x: padding + (depth * indentation)
+                anchors.verticalCenter: parent.verticalCenter
+                visible: isTreeNode && hasChildren
+                text: "▶"
+
+                TapHandler {
+                    onSingleTapped: {
+                        let index = treeView.index(row, column)
+                        treeView.selectionModel.setCurrentIndex(index, ItemSelectionModel.NoUpdate)
+                        treeView.toggleExpanded(row)
+                    }
+                }
+            }
+
+            Label {
+                id: label
+                x: padding + (isTreeNode ? (depth + 1) * indentation : 0)
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - padding - x
+                clip: true
+                text: model.display
+            }
+        }
+    }
+}
+//![0]