diff options
| author | Matthias Rauter <matthias.rauter@qt.io> | 2023-06-01 13:30:32 +0200 |
|---|---|---|
| committer | Jan Arve Sæther <jan-arve.saether@qt.io> | 2023-06-16 23:43:12 +0200 |
| commit | dd1cff389e20fa5760b6dc1f0d3db49c84d9aa18 (patch) | |
| tree | 60687fb99c4338beadb156e73301256f506492d5 /src/quick/doc/snippets | |
| parent | 3df2ec05c26c9b88c99b0ccdbf6ffe19a73ed3dd (diff) | |
Add page for responsive layouts to documentation
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>
Diffstat (limited to 'src/quick/doc/snippets')
| -rw-r--r-- | src/quick/doc/snippets/layouts/responsiveDeclarative.qml | 33 | ||||
| -rw-r--r-- | src/quick/doc/snippets/layouts/responsiveStates.qml | 44 |
2 files changed, 77 insertions, 0 deletions
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] +} |