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

List of all members, including inherited members

Properties

background : list
backgroundItem : Item
backgroundSize : real
dock : enumeration
foreground : list
foregroundItem : Item
hideOnMinimize : bool
open : bool
opened : bool

Methods

hide()
show()

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

hide()

Hides a Drawer's backgroundItem.

show()

Displays the Drawer's backgroundItem.