API Documentation

Documentation for developing SailfishOS applications

DockedPanel QML Type

An expanding panel anchored to the side of an Item More...

Import Statement:	import Sailfish.Silica 1.0
Inherits:	SilicaFlickable

List of all members, including inherited members

Properties

animationDuration : int
dock : enumeration
expanded : bool
modal : bool
moving : bool
open : bool
visibleSize : real

Methods

hide()
show()

Detailed Description

The DockedPanel type provides a container which is docked to an edge of an ApplicationWindow or Page and expands from that edge to display its contents on demand. Dragging a DockedPanel towards the edge from which it expanded will close it.

Here is an example employing a DockedPanel to position some controls at the bottom of a Page:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     SilicaFlickable {
         anchors {
             fill: parent
             bottomMargin: panel.margin
         }

         clip: panel.expanded
         contentHeight: column.height + Theme.paddingLarge

         Column {
             id: column
             spacing: Theme.paddingLarge
             width: parent.width

             Button {
                 text: panel.open ? "Hide controls" : "Show controls"
                 onClicked: panel.open = !panel.open
                 anchors.horizontalCenter: parent.horizontalCenter
             }
         }
     }

     DockedPanel {
         id: panel

         width: parent.width
         height: Theme.itemSizeExtraLarge + Theme.paddingLarge

         dock: Dock.Bottom

         Row {
             anchors.centerIn: parent
             Switch { icon.source: "image://theme/icon-m-shuffle" }
             Switch { icon.source: "image://theme/icon-m-repeat" }
             Switch { icon.source: "image://theme/icon-m-share" }
         }
     }
 }

If the panel is docked to a Page remember use clipping to avoid displaying page contents below the panel. If the panel is docked to ApplicationWindow binding panel's visibleSize to the window's bottomMargin property is enough.

Property Documentation

animationDuration : int

This property determines the time taken to animate open or closed.

The default is 500ms.

dock : enumeration

The alignment of a DockedPanel determines which edge of its parent it is docked to. Possible values are:

Dock.Left - the page is docked to the left edge of its parent.
Dock.Top - the page is docked to the top edge of its parent.
Dock.Right - the page is docked to the right edge of its parent.
Dock.Bottom - the page is docked to the bottom edge of its parent.

The default value is Dock.Bottom

[read-only] expanded : bool

This is true when a DockedPanel is partially or completely visible.

This property controls whether a DockedPanel dims the screen and blocks touches outside of the panel. A touch outside of the panel will cause it to close.

[read-only] moving : bool

This is true when a DockedPanel is moving, due to a drag gesture or a running animation.

open : bool

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

See also expanded.

[read-only] visibleSize : real

This property holds the width or height of visible portion of a DockedPanel.

Method Documentation

hide()

Hides an open DockedPanel.

show()

Displays the DockedPanel.