1 files changed, 137 insertions, 0 deletions
diff --git a/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml b/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml
new file mode 100644
index 0000000000..a1b9ba476a
--- /dev/null
+++ b/tests/manual/quicklayouts/layoutItemProxy/ms-replace.qml
@@ -0,0 +1,137 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+// This example was created for the blog post about responsive layouts:
+// https://www.qt.io/blog/responsive-layouts-in-qt
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+Window {
+    id: window
+
+    width: 600
+    height: 800
+
+    minimumHeight: 500
+    minimumWidth: 160
+
+    title: "Window: (" + width + "x" + height + ")"
+    visible: true
+
+
+    component MyButton : Rectangle {
+        implicitWidth: 56
+        implicitHeight: 56
+        Layout.minimumWidth: 56
+        Layout.minimumHeight: 56
+        Layout.fillWidth: true
+        Layout.fillHeight: false
+        Layout.alignment: Qt.AlignHCenter
+        property string label: ""
+        color: "#eaeaea"
+        Rectangle {
+            implicitWidth: 56
+            implicitHeight: 56
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            color: "#eaeaea"
+            Text {
+                font.pixelSize: 32
+                font.bold: true
+                anchors.centerIn: parent
+                text: label
+                color: "#243a5e"
+            }
+        }
+    }
+
+    LayoutChooser {
+        id: layoutChooser
+        width: parent.width
+        height: parent.height
+
+        layoutChoices: [
+            smallLayout,
+            largeLayout
+        ]
+
+        criteria: [
+            window.width < rl2.Layout.minimumWidth + rl2.anchors.margins * 2,
+            true
+        ]
+
+        MyButton { id: aButton; label: "A"; z: 2 }
+        MyButton { id: bButton; label: "B"; z: 2 }
+        MyButton { id: cButton; label: "C"; z: 2 }
+        MyButton { id: dButton; label: "D"; z: 2 }
+        MyButton { id: eButton; label: "E"; z: 2 }
+        MyButton { id: fButton; label: "F"; z: 2 }
+        MyButton { id: gButton; label: "G"; z: 2 }
+
+        Rectangle {
+            id: rect
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            color: "#fff"
+        }
+
+        property Item smallLayout: RowLayout {
+            parent: layoutChooser
+            height: parent.height
+            width: parent.width
+            spacing: 0
+            Rectangle {
+                id: buttonRect1
+                width: 200
+                Layout.fillHeight: true
+                color: "#c8c8c8"
+                ColumnLayout {
+                    anchors.margins: 10
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    spacing: 8
+                    LayoutItemProxy { target: aButton }
+                    LayoutItemProxy { target: bButton }
+                    LayoutItemProxy { target: cButton }
+                    LayoutItemProxy { target: dButton }
+                    LayoutItemProxy { target: eButton }
+                    LayoutItemProxy { target: fButton }
+                    LayoutItemProxy { target: gButton }
+                }
+            }
+            LayoutItemProxy { target: rect }
+        }
+
+        property Item largeLayout: ColumnLayout {
+            parent: layoutChooser
+            height: parent.height
+            width: parent.width
+            spacing: 0
+            Rectangle {
+                id: buttonRect2
+                Layout.fillWidth: true
+                height: rl2.height + rl2.anchors.margins * 2
+                implicitWidth: rl2.width + rl2.anchors.margins * 2
+                color: "#c8c8c8"
+                RowLayout {
+                    id: rl2
+                    anchors.margins: 10
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    spacing: 8
+                    LayoutItemProxy { target: aButton }
+                    LayoutItemProxy { target: bButton }
+                    LayoutItemProxy { target: cButton }
+                    LayoutItemProxy { target: dButton }
+                    LayoutItemProxy { target: eButton }
+                    LayoutItemProxy { target: fButton }
+                    LayoutItemProxy { target: gButton }
+                }
+            }
+            LayoutItemProxy { target: rect }
+        }
+    }
+}