API Documentation

Documentation for developing SailfishOS applications

Drawer QML Type

A sliding panel with a second panel underneath More...

Import Statement: import Sailfish.Silica 1.0



Detailed Description

The Drawer type provides a container whose foreground items can slide away to reveal items in a second panel below it.

Here is an example employing a Drawer to display an image viewer with a file selector underneath.

Disclaimer! Drawer was used extensively in full-screen viewer pages in apps, but after Sailfish 3.0 the old drawer-based full-screen design has been deprecated.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Drawer {
     id: drawer

     open: true

     background: SilicaListView {
         anchors.fill: parent

         delegate: ListItem {
             Label {
                 text: model.fileName

             onClicked: {
                 image.source = model.filePath
                 drawer.open = false

     MouseArea {
         anchors.fill: parent
         onClicked: drawer.open = !drawer.open

     Image {
         id: image

         width: page.width
         height: page.height

Property Documentation

background : list

This property holds the children of the Drawer's backgroundItem. These are the items exposed when the drawer is open.

See also backgroundItem.

backgroundItem : Item

This property holds the parent Item of items in the background of the drawer.

See also background.

backgroundSize : real

This property holds the distance the foregroundItem is displaced when the Drawer is open.

This is the width of the backgroundItem when it is docked to the left or right and the height when is docked to the top or bottom.

dock : enumeration

The alignment of a Drawer determines which edge the drawer opens from. Possible values are:

  • Dock.Left - the drawer opens from the left edge.
  • Dock.Top - the drawer opens from the top edge.
  • Dock.Right - the drawer opens from the right edge.
  • Dock.Bottom - the drawer opens from the bottom edge.

The default value is Dock.Top

foreground : list

This property holds the children of the Drawer's foregroundItem. These items occupy the full size of the drawer when it is closed, and are shifted by the horizontalMargin or verticalMargin when it is open to expose the background items.

Items declared in the body of a Drawer appear in the foreground by default.

See also foregroundItem.

foregroundItem : Item

This property holds the parent Item of items in the foreground of the drawer.

See also foreground.

hideOnMinimize : bool

This property holds whether the drawer should close itself automatically when the application window is minimized.

The default value is false.

open : bool

This property controls whether a Drawer is open. Changing the value will cause the drawer to animate open or closed.

See also opened.

[read-only] opened : bool

This is true when a Drawer is partially or fully opened, thus exposing the backgroundItem.

Method Documentation


Hides a Drawer's backgroundItem.


Displays the Drawer's backgroundItem.

We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.