accordion 折叠面板

accordion 中包含内容的面板是可以展开和折叠的。

XML Element

accordion

Java Class

JmixAccordion

基本用法

在线示例

使用 accordion 对相似的内容进行分组和隐藏。内容放置于 XML 中内部的 accordionPanel 元素。accordionPanel 元素可以有多个，但是在同一时间只能有一个展开面板。

在线示例中定义了两个面板。下面的代码片段展示了包含表单的面板；显示 summaryText 文本，而内部的其他内容是折叠的：

<accordion id="mainAccordion" height="100%" width="100%">
    <accordionPanel summaryText="Panel with FormLayout">
        <formLayout>
            <textField label="Field 1"/>
            <textField label="Field 2"/>
            <textField label="Field 3"/>
        </formLayout>
    </accordionPanel>
</accordion>

样式版本

在线示例

使用 themeNames 设置组件的样式。

样式 描述 支持的主题

filled

面板使用填充背景样式。

Aura, Lumo

reverse

在文本后面显示开关图标。

Aura, Lumo

small

面板较小。

Aura, Lumo

no-padding

移除内容区域的默认内边距。

Aura

XML 属性

accordion 和 accordionPanel 使用了一些 Jmix 的 通用属性。下面是 accordionPanel 的特殊属性：

名称 描述 默认值

opened

设置面板是否打开。

false

summaryText

为面板的内容设置标题。即使内容折叠，标题依然显示。

—

事件和处理器

accordion 和 accordionPanel 额可以配置相同的处理器。

名称 描述

OpenedChangeEvent

OpenedChangedEvent 每次当面板折叠或展开时发送。为 accordion 设置该处理器可以监听所有的面板状态。为某个 accordionPanel 设置则监听其自己的状态。

下面是 accordion 和 accordionPanel 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 accordion 可以包含多个 accordionPanel 元素。每个面板内可以放任意多个组件或布局。

参考