examples/simpleexamples/layerOverDrawer.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2023 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Controls as QQC2
0009 import org.kde.kirigami as Kirigami
0010
0011 /**
0012  * This example show how to do a sidebar of an application what gets covered by new layers that might get pushed
0013  * in the PageRow layer system.
0014  * When a drawer is in sidebar mode, when it goes modal (for instance when on mobile) will still behave like a drawer
0015  */
0016 Kirigami.ApplicationWindow {
0017     id: root
0018
0019     Kirigami.GlobalDrawer {
0020         id: drawer
0021         modal: false
0022
0023         actions: [
0024             Kirigami.Action {
0025                 text: "Push Layer"
0026                 onTriggered: root.pageStack.layers.push(layerComponent)
0027             },
0028             Kirigami.Action {
0029                 text: "Modal"
0030                 checked: drawer.modal
0031                 checkable: true
0032                 onTriggered: drawer.modal = checked
0033             }
0034         ]
0035     }
0036     contextDrawer: Kirigami.ContextDrawer {
0037         id: contextDrawer
0038     }
0039
0040     pageStack.initialPage: mainPageComponent
0041     pageStack.leftSidebar: drawer
0042
0043     Component {
0044         id: mainPageComponent
0045         Kirigami.ScrollablePage {
0046             title: "Hello"
0047             QQC2.Pane {
0048                 anchors.fill: parent
0049                 QQC2.Label {
0050                     text: "Main page: push a layer to cover both this and the sidebar"
0051                 }
0052             }
0053         }
0054     }
0055     Component {
0056         id: layerComponent
0057         Kirigami.ScrollablePage {
0058             title: "Layer 1"
0059             QQC2.Pane {
0060                 anchors.fill: parent
0061                 QQC2.Label {
0062                     text: "Layer page: this should cover the whole window: main page and sidebar"
0063                 }
0064             }
0065         }
0066     }
0067 }