Unsolved Side panel with QML Drawer
-
Hello
I want a sidepanel in my application. But I need a other functionality. Please look at the screenshot below.
For example with a mouseclick I want, that the red side panel will be cutted half from inside. After that, the area with the slider furthermore will be visible, but NOT the arrow.Has somebody an idea or experience in this topic ?
Best regards
Snoopy
-
Hi,
I don't know if this is exactly what you want :You can past all this code here : https://qmlweb.github.io/ and check if this is the behavior you are looking for.
import QtQuick 2.0
Rectangle{
id:main
height : 400
width : 500
Rectangle{
id : blackRec
height : 300
width : 400
color : "grey"
border.width : 4property bool openSidePanel : false property bool openHalfSidePanel : false MouseArea{ anchors.fill : blackRec onClicked : { if(blackRec.openHalfSidePanel)blackRec.openHalfSidePanel = false if(blackRec.openSidePanel) blackRec.openSidePanel = false else blackRec.openSidePanel = true } }
}
Rectangle{
Text{text:blackRec.openSidePanel?"opened":blackRec.openHalfSidePanel? "half opened" : "closed"}
id : redRec
//visible : blackRec.openSidePanel // hide if closed
color : "red"
height : blackRec.height
width : blackRec.width / 4
anchors.left : blackRec.rightanchors.leftMargin : blackRec.openSidePanel ? -redRec.width : blackRec.openHalfSidePanel ?-redRec.width/2 : 0 }
Rectangle{
id:openHalfButton
height : 50
width : 60
Text{text:blackRec.openHalfSidePanel ? "close" : "open Half"}
//scale : openHalfButtonMouseArea.pressed ? 1 : 0.8
anchors.bottom: main.bottom
color : "#12aa55"
MouseArea{
id:openHalfButtonMouseArea
anchors.fill:parent
onClicked:{
if(blackRec.openSidePanel)blackRec.openSidePanel = false
if(blackRec.openHalfSidePanel) blackRec.openHalfSidePanel = false
else blackRec.openHalfSidePanel = true
}
}
}
}LA
-
@LeLev
Hello,
thank you for your suggestion.I've made it with two Drawer. One Drawer with the half inside Rectangle (with Slider) and a second Drawer with
the complete Rectangle like on the screenshot. The first Drawer is overlaying the second Drawer, but the user can't see that. Now I can can control both Drawer with the visible or the position property.Best regards
Snoopy
-
@ODБOï, that code is a bit difficult to read since only some of it is formatted as code. Could you reformat it as a code block?
-
This post is deleted!