Ubuntu logo

Developer

  • QML
  • Ubuntu SDK 14.04
  • Ubuntu.Components.Popups
  • › Popover
  • Search API:

    Popover

    A popover allows an application to present additional content without changing the view. A popover has a fixed width and automatic height, depending on is contents. It can be closed by clicking anywhere outside of the popover area. More...

    Inherits PopupBase

    Inherited by ActionSelectionPopover.

    Properties

    Methods

    • hide() (preliminary)
    • show() (preliminary)

    Detailed Description

    See also the Design Guidelines on Popovers.

    Example:

    import QtQuick 2.0
    import Ubuntu.Components 0.1
    import Ubuntu.Components.ListItems 0.1 as ListItem
    import Ubuntu.Components.Popups 0.1
    Rectangle {
        color: Theme.palette.normal.background
        width: units.gu(80)
        height: units.gu(80)
        Component {
            id: popoverComponent
            Popover {
                id: popover
                Column {
                    id: containerLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }
                    ListItem.Header { text: "Standard list items" }
                    ListItem.Standard { text: "Do something" }
                    ListItem.Standard { text: "Do something else" }
                    ListItem.Header { text: "Buttons" }
                    ListItem.SingleControl {
                        highlightWhenPressed: false
                        control: Button {
                            text: "Do nothing"
                            anchors {
                                fill: parent
                                margins: units.gu(1)
                            }
                        }
                    }
                    ListItem.SingleControl {
                        highlightWhenPressed: false
                        control: Button {
                            text: "Close"
                            anchors {
                                fill: parent
                                margins: units.gu(1)
                            }
                            onClicked: PopupUtils.close(popover)
                        }
                    }
                }
            }
        }
        Button {
            id: popoverButton
            anchors.centerIn: parent
            text: "open"
            onClicked: PopupUtils.open(popoverComponent, popoverButton)
        }
    }

    Property Documentation

    autoClose : bool

    The property drives the automatic closing of the Popover when user taps on the dismissArea. The default behavior is to close the Popover, therefore set to true.

    When set to false, closing the Popover is the responsibility of the caller. Also, the mouse and touch events are not blocked from the dismissArea.


    caller : Item

    The Item such as a Button that the user interacted with to open the Dialog. This property will be used for the automatic positioning of the Dialog next to the caller, if possible.


    callerMargin : real

    The property holds the margin from the popover's caller. The property is themed.


    defaultcontainer : list<Object>

    Content will be put inside the foreround of the Popover.


    contentHeight : real

    Use this property to override the default content height.


    contentWidth : real

    Use this property to override the default content width.


    edgeMargins : real

    The property holds the margins from the popover's dismissArea. The property is themed.


    foregroundStyle : Component

    Exposes the style property of the StyledItem contained in the Popover. Refer to StyledItem how to use it.


    pointerTarget : Item

    The property holds the item to which the pointer should be anchored to. This can be same as the caller or any child of the caller. By default the property is set to caller.


    Method Documentation

    Popover::hide()

    This documentation is under development and is subject to change.

    Hide the popover. Only use this function if you handle memory management. Otherwise use PopupUtils.close() to do it automatically.


    Popover::show()

    This documentation is under development and is subject to change.

    Make the popover visible. Reparent to the background area object first if needed. Only use this function if you handle memory management. Otherwise use PopupUtils.open() to do it automatically.