An expandable list item with no contents. The Expandable class can be used for generic list items containing other components such as buttons. It subclasses Empty and thus brings all that functionality, but additionally provides means to expand and collapse the item. More...

Import Statement: import Ubuntu.Components.ListItems 1.3



Detailed Description

When used together with an UbuntuListView or ExpandablesColumn it can coordinate with other items in the list to make sure it is scrolled while expanding to be fully visible in the view. Additionally it is made sure that only one Expandable item is expanded at a time and it is collapsed when the user clicks outside the item.

You can set expanded to true/false to expand/collapse the item.


import Ubuntu.Components 1.3
import Ubuntu.Components.ListItems 1.3 as ListItem
Item {
ListModel {
id: listModel
ListItem.UbuntuListView {
anchors { left: parent.left; right: parent.right }
height: units.gu(24)
model: listModel
delegate: ListItem.Expandable {
id: expandingItem
expandedHeight: units.gu(30)
onClicked: {
expanded = true;

Property Documentation

[default] children : QtObject

Reparent any content to inside the Flickable

collapseOnClick : bool

If set to true, the item will collapse again when the user clicks somewhere in the always visible (when collapsed) area.

collapsedHeight : real

The collapsed (normal) height of the item. Defaults to the standard height for list items.

expanded : bool

Reflects the expanded state. Set this to true/false to expand/collapse the item.

expandedHeight : real

The expanded height of the item's content. Defaults to the same as collapsedHeight which disables the expanding feature. In order for the item to be expandable, set this to the expanded size. Note that the actual expanded size can be smaller if there is not enough space in the containing list. In that case the item becomes flickable automatically.