Revision history [back]

I want to add a sidebar to my app, that slides in. I have chosen a Drawer element but I don't know how to control the width of this element. Here is a code snipped:

Drawer {
    id: rightMenu

    anchors.fill: rotationItem
    dock: Dock.Right

    background: Rectangle {
        anchors.fill: parent
        color: Theme.highlightDimmerColor

        SilicaListView {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            ...
        }
    }
}

When the Drawer item opens, the contents of the page are darkened and the sidebar opens with a light background. Therefore I have to insert the Rectangle element with an even darker background color. If I reduce the width on the first layer, the sidebar gets smaller and the page is no longer completely darkened. If I change the width of the second layer, the width of the sidebar remains unchanged.

I played araound with the backgroundSize property. But I don't know an appropriate value. The side wasn't visible at all, if I set any value. Any ideas?

I want to add a sidebar to my app, that slides in. I have chosen a Drawer element but I don't know how to control the width of this element. Here is a code snipped:

Drawer {
    id: rightMenu

    anchors.fill: rotationItem
    dock: Dock.Right

    background: Rectangle {
        anchors.fill: parent
        color: Theme.highlightDimmerColor

        SilicaListView {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            ...
        }
    }
}

When the Drawer item opens, the contents of the page are darkened and the sidebar opens with a light background. Therefore I have to insert the Rectangle element with an even darker background color. If I reduce the width on the first layer, the sidebar gets smaller and the page is no longer completely darkened. If I change the width of the second layer, the width of the sidebar remains unchanged.

I played araound with the backgroundSize property. But I don't know an appropriate value. The side wasn't visible at all, if I set any value.

Whatever I try: The width of the drawer is about the half of the screen width.

Any ideas?