123 lines
2.9 KiB
QML
123 lines
2.9 KiB
QML
// Copyright (c) Daniel Gakwaya.
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
|
|
ApplicationWindow {
|
|
id : rootId
|
|
visible: true
|
|
width: 360
|
|
height: 520
|
|
title: qsTr("Drawer")
|
|
|
|
header: ToolBar{
|
|
height: 50
|
|
background: Rectangle{
|
|
color: "mintcream"
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: 20
|
|
anchors.fill: parent
|
|
|
|
ToolButton{
|
|
background: Rectangle{
|
|
color: "mintcream"
|
|
}
|
|
|
|
icon.source: "qrc:/images/drawer.png"
|
|
|
|
onClicked: {
|
|
console.log("Toolbutton clicked")
|
|
//Open Drawer
|
|
drawerId.open()
|
|
}
|
|
|
|
}
|
|
|
|
Label {
|
|
id: titleLabel
|
|
text: "Drawer App"
|
|
font.pixelSize: 20
|
|
elide: Label.ElideRight
|
|
horizontalAlignment: Qt.AlignHCenter
|
|
verticalAlignment: Qt.AlignVCenter
|
|
Layout.fillWidth: true
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
Drawer {
|
|
id: drawerId
|
|
width: Math.min(rootId.width,rootId.height) * (2/3)
|
|
height: rootId.height
|
|
interactive: true
|
|
|
|
ColumnLayout{
|
|
spacing: 0
|
|
width: parent.width
|
|
|
|
Button{
|
|
width: parent.width
|
|
height: 50
|
|
text : "Item1"
|
|
font.pointSize: 20
|
|
background: Rectangle{
|
|
color: "beige"
|
|
}
|
|
Layout.fillWidth: true
|
|
|
|
onClicked: {
|
|
console.log("Clicked on item1 ")
|
|
contentRectId.color = "red"
|
|
drawerId.close()
|
|
}
|
|
}
|
|
Button{
|
|
width: parent.width
|
|
height: 50
|
|
text : "Item2"
|
|
font.pointSize: 20
|
|
background: Rectangle{
|
|
color: "yellowgreen"
|
|
}
|
|
Layout.fillWidth: true
|
|
|
|
onClicked: {
|
|
console.log("Clicked on item2 ")
|
|
contentRectId.color = "green"
|
|
drawerId.close()
|
|
}
|
|
}
|
|
Button{
|
|
width: parent.width
|
|
height: 50
|
|
text : "Item3"
|
|
font.pointSize: 20
|
|
background: Rectangle{
|
|
color: "dodgerblue"
|
|
}
|
|
Layout.fillWidth: true
|
|
|
|
onClicked: {
|
|
console.log("Clicked on item3 ")
|
|
contentRectId.color = "blue"
|
|
drawerId.close()
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Rectangle{
|
|
id : contentRectId
|
|
anchors.fill: parent
|
|
color: "gray"
|
|
}
|
|
}
|