Components/Data display

ECollapse Collapse

import EUI 1.0

Examples

Before-change validation and custom content

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECollapse { activeNames: ["overview"] expandIconPosition: "left" width: Math.min(600, parent.width) beforeCollapse: function(name, expanded) { return name !== "locked" } model: [{ name: "overview", title: qsTr("Project overview"), content: qsTr("Multiple panels, accordion and async beforeCollapse validation.") }, { name: "locked", title: qsTr("Change blocked by validation"), content: qsTr("This panel remains closed.") }, { name: "details", title: qsTr("Interaction details"), content: qsTr("Titles and content can use Component delegates.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Collapse

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECollapse { accordion: true model: [{ "name": "one", "title": qsTr("Consistency"), "content": qsTr("Keep the interface and interactions consistent.") }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

accordionbool

Accordion mode allowing at most one expanded node or collapse item at a level.

Defaultfalse

activeNamesvar

Expanded collapse item names; accordion mode keeps at most one.

Default[]

beforeCollapsevar

Guard before changing collapse state, returning a boolean or Promise.

Defaultnull

contentDelegateComponent

Component slot for custom body content; null uses the default content. See this page’s examples for delegate context.

Defaultnull

enabledbool

Allow interaction; false disables the control.

Defaulttrue

expandIconPositionstring

Position of the collapse icon relative to the title.

"left" / "right"

Default"right"

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

iconDelegateComponent

Component slot for custom icon; null uses the default content. See this page’s examples for delegate context.

Defaultnull

modelvar

Array of collapse panel data.

Fields:
name, title, content
disabled, icon, titleDelegate
iconDelegate, contentDelegate

Default[]

pendingNamesvar

Names of items awaiting asynchronous collapse guards.

Default[]

titleDelegateComponent

Component slot for custom title; null uses the default content. See this page’s examples for delegate context.

Defaultnull

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

Signals

SignaturePurpose

changed(var names)

Emitted when expanded panels change; names contains the expanded panel names.

Methods

SignaturePurpose

isExpanded(name)

Return whether the specified item is expanded.

setActiveNames(names)

Set the names of the expanded panels.

toggle(name)

Toggle the expanded or selected state; pass the target identifier when required.