Drawer QML Type

Drawer provides a swipe-based side panel, similar to those often used in touch interfaces to provide a central location for navigation.

Drawer can be positioned at any of the four edges of the content item. The drawer above is positioned against the left edge of the window. The drawer is then opened by "dragging" it out from the left edge of the window.

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

Drawer is a special type of popup that resides at one of the window edges. By default, Drawer re-parents itself to the window overlay, and therefore operates on window coordinates. It is also possible to manually set the parent to something else to make the drawer operate in a specific coordinate space.

Drawer can be configured to cover only part of its window edge. The following example illustrates how Drawer can be positioned to appear below a window header:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar { }

    Drawer {
        y: header.height
        width: window.width * 0.6
        height: window.height - header.height
    }
}

The position property determines how much of the drawer is visible, as a value between 0.0 and 1.0. It is not possible to set the x-coordinate (or horizontal margins) of a drawer at the left or right window edge, or the y-coordinate (or vertical margins) of a drawer at the top or bottom window edge.

In the image above, the application's contents are "pushed" across the screen. This is achieved by applying a translation to the contents:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 200
    height: 228
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

        transform: Translate {
            x: drawer.position * content.width * 0.33
        }
    }
}

If you would like the application's contents to stay where they are when the drawer is opened, don't apply a translation.

Drawer can be configured as a non-closable persistent side panel by making the Drawer non-modal and non-interactive. See the Side Panel example for more details.

See Also▲

dragMargin : real▲

edge : enumeration▲

[since QtQuick.Controls 2.2 (Qt 5.9)] interactive : bool▲

position : real▲