1 files changed, 120 insertions, 0 deletions
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml b/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml
new file mode 100644
index 0000000000..1f0298de44
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml
@@ -0,0 +1,120 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Shapes
+
+Pane {
+    width: 400
+    height: 300
+
+    Page {
+        anchors.fill: parent
+        anchors.margins: 40
+
+        header: ToolBar {
+            Label {
+                text: "Material"
+                anchors.centerIn: parent
+            }
+        }
+
+        TextField {
+            id: textField
+            text: "TextField"
+            anchors.centerIn: parent
+
+            Component.onCompleted: forceActiveFocus()
+        }
+    }
+
+    component Line: Shape {
+        // Account for 1-pixel-wide lines.
+        width: Math.max(1, endX - startX)
+        height: Math.max(1, endY - startY)
+
+        layer.enabled: true
+        layer.samples: 4
+
+        property alias startX: shapePath.startX
+        property alias startY: shapePath.startY
+        property alias endX: pathLine.x
+        property alias endY: pathLine.y
+
+        ShapePath {
+            id: shapePath
+            strokeWidth: 1
+            strokeColor: "#444"
+
+            PathLine {
+                id: pathLine
+            }
+        }
+    }
+
+    Label {
+        id: primaryLabel
+        x: 40
+        y: 3
+        text: "Primary"
+    }
+    Line {
+        id: primaryLine
+        x: primaryLabel.x + primaryLabel.width / 2
+        y: primaryLabel.y + primaryLabel.height
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 40
+    }
+
+    Label {
+        id: foregroundLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: 3
+        text: "Foreground"
+    }
+    Line {
+        id: foregroundLine
+        x: foregroundLabel.x + foregroundLabel.width / 2
+        y: foregroundLabel.y + foregroundLabel.height
+        // Lines are drawn at the center of the pixel.
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 34
+    }
+
+    Label {
+        id: accentLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: parent.height * 0.825
+        text: "Accent"
+    }
+    Line {
+        id: accentLine
+        x: accentLabel.x + accentLabel.width / 2
+        y: parent.height * 0.7
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 38
+    }
+
+    Label {
+        id: backgroundLabel
+        x: parent.width - width - 10
+        y: parent.height - height - 10
+        text: "Background"
+    }
+    Line {
+        id: backgroundLine
+        x: backgroundLabel.x + backgroundLabel.width / 2
+        y: backgroundLabel.y - height
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 40
+    }
+}