Qt 5.7 | Qt Quick Controls 2 | QML Types | Drawer QML Type

Qt 5.7.1 Reference Documentation

# Drawer QML Type

Provides a swipe-based side panel. More...

Import Statement: | import QtQuick.Controls 2.0
Since: | Qt 5.7
Inherits: | Popup

- List of all members, including inherited members

## Properties

- dragMargin : real
- edge : enumeration
- position : real

## Detailed Description

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. In this image, it is 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 2.7
      import QtQuick.Controls 2.0

      ApplicationWindow {
          id: window
          visible: true

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

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 2.7
      import QtQuick.Controls 2.0

      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 2.7
      import QtQuick.Controls 2.0

      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.

Note: On some platforms, certain edges may be reserved for system gestures and therefore cannot be used with Drawer.

See also SwipeView, Customizing Drawer, Navigation Controls, and Popup Controls.

## Property Documentation

dragMargin : real

This property holds the distance from the screen edge within which drag actions will open the drawer. Setting the value to `0` or less prevents opening the drawer by dragging.

The default value is `Qt.styleHints.startDragDistance`.

edge : enumeration

This property holds the edge of the content item at which the drawer will open from. The acceptable values are:

Constant | Description
--- | ---
`Qt.TopEdge` | The top edge of the content item.
`Qt.LeftEdge` | The left edge of the content item (default).
`Qt.RightEdge` | The right edge of the content item.
`Qt.BottomEdge` | The bottom edge of the content item.

position : real

This property holds the position of the drawer relative to its final destination. That is, the position will be `0` when the drawer is fully closed, and `1` when fully open.