组件/数据展示

ECollapse 折叠面板

import EUI 1.0

示例与代码

切换前校验与自定义内容

QML 代码QML

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("项目概况"), content: qsTr("支持多面板、手风琴和异步 beforeCollapse 校验。") }, { name: "locked", title: qsTr("校验拒绝切换"), content: qsTr("此项不会打开。") }, { name: "details", title: qsTr("交互详情"), content: qsTr("标题和内容可使用 Component delegate。") }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

折叠面板

QML 代码QML

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("一致性"), "content": qsTr("保持界面和交互一致。") }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

accordionbool

手风琴模式，同一层最多展开一个节点或折叠项。

默认值false

activeNamesvar

展开的折叠项名称数组；accordion 模式只保留一个。

默认值[]

beforeCollapsevar

折叠状态变化前的回调，可返回布尔值或 Promise。

默认值null

contentDelegateComponent

自定义主体内容的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

enabledbool

是否允许交互；false 时控件禁用。

默认值true

expandIconPositionstring

折叠图标相对于标题的位置。

"left" / "right"

默认值"right"

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

iconDelegateComponent

自定义图标的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

modelvar

折叠面板的数据数组。

字段：
name, title, content
disabled, icon, titleDelegate
iconDelegate, contentDelegate

默认值[]

pendingNamesvar

正在等待异步折叠检查完成的项名称。

默认值[]

titleDelegateComponent

自定义标题的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

信号

签名作用

changed(var names)

展开项变化时触发，names 为当前展开项的名称集合。

方法

签名作用

isExpanded(name)

判断指定项目是否展开，返回布尔值。

setActiveNames(names)

设置当前展开面板的名称集合。

toggle(name)

切换当前展开或选中状态；需要标识时传入目标项的标识。