Page With Bottom Edge

Author Renato Araujo Oliveira Filho
License GNU General Public License v3.0
Contact renato.filho@canonical.com
Framework ubuntu-sdk-14.10

This component provides a bottom edge which can be used to house common actions. There is only one bottom edge available for a page. Only one. The user can use it without looking where they are pressing. Think carefully about which action to put there.

For instance, the clock app uses the bottom edge to show the alarms saved by the user. While a memo creating app like Quick Memo uses it to create a memo.

Example:

MainView {
    objectName: "mainView"

    applicationName: "com.ubuntu.developer.boiko.bottomedge"

    width: units.gu(100)
    height: units.gu(75)

    Component {
        id: pageComponent

        PageWithBottomEdge {
            id: mainPage
            title: i18n.tr("Main Page")

            bottomEdgePageComponent: Page {
                title: "Contents"
                anchors.fill: parent

                ListView {
                    anchors.fill: parent
                    model: 50
                    delegate: ListItems.Standard {
                        text: "One Content Item: " + index
                    }
                }
            }
            bottomEdgeTitle: i18n.tr("Bottom edge action")
        }
    }

    PageStack {
        id: stack
        Component.onCompleted: stack.push(pageComponent)
    }
}
../_images/pagewithbottomedge.png

Properties

Property Documentation

bottomEdgeTitle

The text to be displayed in the bottom edge action.

bottomEdgePageComponent

The page to be shown when swiping the bottom edge up.

bottomEdgeEnabled

Boolean property to enable/disable the bottom edge

Signal Documentation

bottomEdgeReleased()

This handler is called when the bottom edge is let go.

bottomEdgeDismissed()

Called when the bottom edge is dismissed (hidden).