examples/simpleexamples/Sidebar.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2016 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Layouts
0009 import QtQuick.Controls as QQC2
0010 import org.kde.kirigami as Kirigami
0011
0012 Kirigami.ApplicationWindow {
0013     id: root
0014     width: Kirigami.Units.gridUnit * 60
0015     height: Kirigami.Units.gridUnit * 40
0016
0017
0018     pageStack.initialPage: mainPageComponent
0019     globalDrawer: Kirigami.OverlayDrawer {
0020         id: drawer
0021         drawerOpen: true
0022         modal: false
0023         //leftPadding: Kirigami.Units.largeSpacing
0024         rightPadding: Kirigami.Units.largeSpacing
0025         contentItem: ColumnLayout {
0026             Layout.preferredWidth: Kirigami.Units.gridUnit * 20
0027
0028             QQC2.Label {
0029                 Layout.alignment: Qt.AlignHCenter
0030                 text: "This is a sidebar"
0031                 Layout.fillWidth: true
0032                 width: parent.width - Kirigami.Units.smallSpacing * 2
0033                 wrapMode: Text.WordWrap
0034             }
0035             QQC2.Button {
0036                 Layout.alignment: Qt.AlignHCenter
0037                 text: "Modal"
0038                 checkable: true
0039                 Layout.fillWidth: true
0040                 checked: false
0041                 onCheckedChanged: drawer.modal = checked
0042             }
0043             Item {
0044                 Layout.fillHeight: true
0045             }
0046         }
0047     }
0048     contextDrawer: Kirigami.OverlayDrawer {
0049         id: contextDrawer
0050         drawerOpen: true
0051         edge: Qt.application.layoutDirection === Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
0052         modal: false
0053         leftPadding: Kirigami.Units.largeSpacing
0054         rightPadding: Kirigami.Units.largeSpacing
0055         contentItem: ColumnLayout {
0056             Layout.preferredWidth: Kirigami.Units.gridUnit * 10
0057
0058             QQC2.Label {
0059                 Layout.alignment: Qt.AlignHCenter
0060                 text: "This is a sidebar"
0061                 Layout.fillWidth: true
0062                 width: parent.width - Kirigami.Units.smallSpacing * 2
0063                 wrapMode: Text.WordWrap
0064             }
0065             QQC2.Button {
0066                 Layout.alignment: Qt.AlignHCenter
0067                 text: "Modal"
0068                 checkable: true
0069                 Layout.fillWidth: true
0070                 checked: false
0071                 onCheckedChanged: contextDrawer.modal = checked
0072             }
0073             Item {
0074                 Layout.fillHeight: true
0075             }
0076         }
0077     }
0078
0079     menuBar: QQC2.MenuBar {
0080         QQC2.Menu {
0081             title: qsTr("&File")
0082             QQC2.Action { text: qsTr("&New...") }
0083             QQC2.Action { text: qsTr("&Open...") }
0084             QQC2.Action { text: qsTr("&Save") }
0085             QQC2.Action { text: qsTr("Save &As...") }
0086             QQC2.MenuSeparator { }
0087             QQC2.Action { text: qsTr("&Quit") }
0088         }
0089         QQC2.Menu {
0090             title: qsTr("&Edit")
0091             QQC2.Action { text: qsTr("Cu&t") }
0092             QQC2.Action { text: qsTr("&Copy") }
0093             QQC2.Action { text: qsTr("&Paste") }
0094         }
0095         QQC2.Menu {
0096             title: qsTr("&Help")
0097             QQC2.Action { text: qsTr("&About") }
0098         }
0099     }
0100     header: QQC2.ToolBar {
0101         contentItem: RowLayout {
0102             QQC2.ToolButton {
0103                 text: "Global ToolBar"
0104             }
0105             Item {
0106                 Layout.fillWidth: true
0107             }
0108             Kirigami.ActionTextField {
0109                 id: searchField
0110
0111                 placeholderText: "Search…"
0112
0113                 focusSequence: StandardKey.Find
0114                 leftActions: [
0115                     Kirigami.Action {
0116                         icon.name: "edit-clear"
0117                         visible: searchField.text.length > 0
0118                         onTriggered: {
0119                             searchField.text = ""
0120                             searchField.accepted()
0121                         }
0122                     },
0123                     Kirigami.Action {
0124                         icon.name: "edit-clear"
0125                         visible: searchField.text.length > 0
0126                         onTriggered: {
0127                             searchField.text = ""
0128                             searchField.accepted()
0129                         }
0130                     }
0131                 ]
0132                 rightActions: [
0133                     Kirigami.Action {
0134                         icon.name: "edit-clear"
0135                         visible: searchField.text.length > 0
0136                         onTriggered: {
0137                             searchField.text = ""
0138                             searchField.accepted()
0139                         }
0140                     },
0141                     Kirigami.Action {
0142                         icon.name: "anchor"
0143                         visible: searchField.text.length > 0
0144                         onTriggered: {
0145                             searchField.text = ""
0146                             searchField.accepted()
0147                         }
0148                     }
0149                 ]
0150
0151                 onAccepted: console.log("Search text is " + searchField.text)
0152             }
0153         }
0154     }
0155     //Main app content
0156     Component {
0157         id: mainPageComponent
0158         MultipleColumnsGallery {}
0159     }
0160     footer: QQC2.ToolBar {
0161         position: QQC2.ToolBar.Footer
0162         QQC2.Label {
0163             anchors.fill: parent
0164             verticalAlignment: Qt.AlignVCenter
0165             text: "Global Footer"
0166         }
0167     }
0168 }