Drawer QML Type
Provides a swipe-based side panel. More...
Import Statement: | import QtQuick.Controls 2.0 |
Since: | Qt 5.7 |
Inherits: |
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. | The drawer is then opened by "dragging" it out from the left 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
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
.
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. |
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.