Contents

Expandable QML Type

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 Lomiri.Components.ListItems 1.3
Inherits:

Empty

Properties

Signals

Detailed Description

When used together with an LomiriListView 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.

Examples:

import Lomiri.Components
import Lomiri.Components.ListItems as ListItem

Item {
    ListModel {
        id: listModel
    }

    ListItem.LomiriListView {
        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.


hovered : bool

True if the mouse cursor hovers over the button's mouse area.


pressed : bool

True if the user presses a mouse button in the button's mouse area.


sensingMargins group

sensingMargins.all : real

sensingMargins.bottom : real

sensingMargins.left : real

sensingMargins.right : real

sensingMargins.top : real

The property group specifies the margins extending the visual area where the touch events are sensed. Positive values mean the area will be extended on the specified direction outside of the visual area, negative values mean the sensing will fall under the component's visual border. All values default to 0. This does not affect mouse sensing area, which only covers the visual area of the component.

Note: If the visual area and the sensing margins are not reaching the 4x4 grid units limit, the component will fall back to these minimum limits. For example, extending a 2x2 grid unit visual component into 5x4 grid units sensing area would look as follows:

AbstractButton {
    width: units.gu(2)
    height: units.gu(2)
    Icon {
        name: "settings"
    }
    sensingArea {
        // no need to set the vertical direction as the minimum of
        // 4 grid units will be taken automatically
        leftMargin: units.gu(1)
        // we only have to add 2 grid units as the width + left margin
        // already gives us 3 grid units out of 5
        rightMargin: units.gu(2)
    }
}

Signal Documentation

clicked()

This handler is called when there is a mouse click on the button and the button is not disabled. If action is defined, the action will be triggered.

Note: The corresponding handler is onClicked.


clicked()

This handler is called when there is a mouse click on the button and the button is not disabled. If action is defined, the action will be triggered.

Note: The corresponding handler is onClicked.


pressAndHold()

This handler is called when there is a long press.

Note: The corresponding handler is onPressAndHold.


pressAndHold()

This handler is called when there is a long press.

Note: The corresponding handler is onPressAndHold.