# BottomEdgeRegion QML Type

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

Import Statement: | import Lomiri.Components 1.3
Since: | Lomiri.Components 1.3
Inherits: | QtObject

- List of all members, including inherited members

## 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 Lomiri.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: LomiriColors.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

contentComponent : Component

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.

contentUrl : url

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.

enabled : bool

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

from : real

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.

to : real

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

void dragEnded()

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

Note: The corresponding handler is `onDragEnded`.

void entered()

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

Note: The corresponding handler is `onEntered`.

void exited()

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

Note: The corresponding handler is `onExited`.