Ubuntu.Components.Popups.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...

Properties

• autoClose : bool
• caller : Item
• callerMargin : real
• container : list<Object>
• contentHeight : real
• contentWidth : real
• edgeMargins : real
• foregroundStyle : Component
• pointerTarget : Item
• style : Component
• styleName : string
• theme : ThemeSettings

Methods

• hide()
• show()

Detailed Description

Example:

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Popups 1.3
import Ubuntu.Components.ListItems 1.3 as Old_ListItem
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
}
// there is no equivalent yet to ListItem.Header
Old_ListItem.Header { text: "Standard list items" }
ListItem {
// shall specify the height when Using ListItemLayout inside ListItem
height: somethingLayout.height + (divider.visible ? divider.height : 0)
ListItemLayout {
id: somethingLayout
title.text: "Do somethings"
}
onClicked: console.log("clicked on ListItem with onClicked implemented")
}
ListItem {
// shall specify the height when Using ListItemLayout inside ListItem
height: somethingElseLayout.height + (divider.visible ? divider.height : 0)
ListItemLayout {
id: somethingElseLayout
title.text: "Do somethings"
subtitle.text: "else"
}
}
ListItem {
// shall specify the height when Using ListItemLayout inside ListItem
height: closeBtn.height + (divider.visible ? divider.height : 0)
Button {
id: closeBtn
text: "Close button"
onClicked: PopupUtils.close(popover);
}
}
}
}
}
Button {
id: popoverButton
anchors.centerIn: parent
text: "open"
onClicked: PopupUtils.open(popoverComponent, popoverButton)
}
}

Property Documentation

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.

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.

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

Content will be put inside the foreround of the Popover.

Use this property to override the default content height.

Use this property to override the default content width.

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

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

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.

The style of the foreground of the Popover. This property takes precedence over styleName

This QML property was introduced in Ubuntu.Components 1.3.

See also StyledItem::style.

The style name of the foreground of the Popover.

This QML property was introduced in Ubuntu.Components 1.3.

See also StyledItem::styleName.

Configure the theme of the Popover foreground and all its subcomponents.

This QML property was introduced in Ubuntu.Components 1.3.

See also StyledItem::theme and Dialog::theme.

Method Documentation

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

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.