From dd1cff389e20fa5760b6dc1f0d3db49c84d9aa18 Mon Sep 17 00:00:00 2001
From: Matthias Rauter <matthias.rauter@qt.io>
Date: Thu, 1 Jun 2023 13:30:32 +0200
Subject: Add page for responsive layouts to documentation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some information of the recent blog post about responsive
layouts fits well into the documentation. A summary is added
with this patch.

Change-Id: I6e452b774b877c60a68d5b9a3e6a1de45bcad9bd
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>
---
 .../doc/snippets/layouts/responsiveDeclarative.qml | 33 ++++++++++++++++
 .../doc/snippets/layouts/responsiveStates.qml      | 44 ++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 src/quick/doc/snippets/layouts/responsiveDeclarative.qml
 create mode 100644 src/quick/doc/snippets/layouts/responsiveStates.qml

(limited to 'src/quick/doc/snippets')

diff --git a/src/quick/doc/snippets/layouts/responsiveDeclarative.qml b/src/quick/doc/snippets/layouts/responsiveDeclarative.qml
new file mode 100644
index 0000000000..e5a0c6c4f4
--- /dev/null
+++ b/src/quick/doc/snippets/layouts/responsiveDeclarative.qml
@@ -0,0 +1,33 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+
+Window {
+    visible: true
+    width: 350
+    height: 250
+    //! [document]
+    GridLayout {
+        columns: width < 300 ? 1 : 2
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle1
+            color: "tomato"
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        Rectangle {
+            id: rectangle2
+            color: "lightskyblue"
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+    //! [document]
+}
diff --git a/src/quick/doc/snippets/layouts/responsiveStates.qml b/src/quick/doc/snippets/layouts/responsiveStates.qml
new file mode 100644
index 0000000000..5506407230
--- /dev/null
+++ b/src/quick/doc/snippets/layouts/responsiveStates.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+
+Window {
+    visible: true
+    width: 350
+    height: 250
+    //! [document]
+    GridLayout {
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle1
+            color: "tomato"
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        Rectangle {
+            id: rectangle2
+            color: "lightskyblue"
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        states: [
+            State {
+                when: width < 300
+                PropertyChanges { target: rectangle2; Layout.row: 1 }
+                PropertyChanges { target: rectangle2; Layout.column: 0 }
+            },
+            State {
+                when: width >= 300
+                PropertyChanges { target: rectangle2; Layout.row: 0 }
+                PropertyChanges { target: rectangle2; Layout.column: 1 }
+            }
+        ]
+    }
+    //! [document]
+}
-- 
cgit v1.2.3