Ubuntu.Components.BottomEdgeRegion

Defines an active region within the BottomEdge component. More...

Properties

• contentComponent : Component
• contentUrl : url
• enabled : bool
• from : real
• to : real

Signals

• void dragEnded()
• void entered()
• void exited()

Detailed Description

Bottom edge regions are portions within the bottom edge area which can define different content or action whenever the drag enters in the area. The area is defined by from and to properties vertically, whereas horizontally is stretched across bottom edge width. Custom content can be defined through contentUrl or contentComponent properties, which will override the BottomEdge::contentUrl and BottomEdge::contentComponent properties for the time the gesture is in the section area.

import QtQuick 2.4
import Ubuntu.Components 1.3
MainView {
width: units.gu(40)
height: units.gu(70)
Page {
header: PageHeader {
title: "BottomEdge regions"
}
BottomEdge {
id: bottomEdge
height: parent.height - units.gu(20)
hint: BottomEdgeHint {
text: "My bottom edge"
}
// a fake content till we reach the committable area
contentComponent: Rectangle {
width: bottomEdge.width
height: bottomEdge.height
color: UbuntuColors.green
}
// override bottom edge sections to switch to real content
BottomEdgeRegion {
from: 0.33
contentComponent: Page {
width: bottomEdge.width
height: bottomEdge.height
header: PageHeader {
title: "BottomEdge Content"
}
}
}
}
}
}

Entering into the section area is signalled by the entered signal and when drag leaves the area the exited signal is emitted. If the drag ends within the section area, the dragEnded signal is emitted. In case the section's to property is less than 1.0, the bottom edge content will only be exposed to that value, and the BottomEdge::status will get the Committed value. No further drag is possible after reaching Commited state.

Note: Whereas there is no restriction on making overlapping sections, beware that overlapping sections changing the content through the contentUrl or contentComponent properties will cause unpredictable results.

Property Documentation

Specifies the component defining the section specific content. This propery will temporarily override the BottomEdge::contentComponent property value when the drag gesture enters the section area. The orginal value will be restored once the gesture leaves the section area.

Specifies the url to the document defining the section specific content. This propery will temporarily override the BottomEdge::contentUrl property value when the drag gesture enters the section area. The orginal value will be restored once the gesture leaves the section area.

Enables the section. Disabled sections do not trigger nor change the BottomEdge content. Defaults to false.

Specifies the starting ratio of the bottom erge area. The value must be bigger or equal to 0 but strictly smaller than to. Defaults to 0.0.

Specifies the ending ratio of the bottom edge area. The value must be bigger than from and smaller or equal to 1.0.

Note: If the end point is less than 1.0, ending the drag within the section will result in exposing the bottom edge content only till the ration specified by this property.

Signal Documentation

Signal triggered when the drag ends within the active bottom edge section area.

Signal triggered when the drag enters into the area defined by the bottom edge section.

Signal triggered when the drag leaves the area defined by the bottom edge section.