accordion 折叠面板

在线示例

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

  • XML 元素：accordion

  • Java 类：JmixAccordion

基本用法

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

如需在 Jmix Studio 中添加 accordionPanel，可以在视图 XML 或者 Jmix UI 结构面板中选择组件，然后点击组件面板的 Add→AccordionPanel 按钮。

下面的示例展示了带三个面板的 accordion 组件：

<accordion id="accordion">
    <accordionPanel summaryText="Stamford">
        <div text="Stamford is a town in the South Kesteven District of Lincolnshire, England."/>
    </accordionPanel>
    <accordionPanel summaryText="Boston">
        <div text="Boston is the capital and largest city of the American Northeast."/>
    </accordionPanel>
    <accordionPanel summaryText="London">
        <div text="London is the capital and largest city of England and the United Kingdom." />
    </accordionPanel>
</accordion>
accordion basic

每个 accordionPanel 都有一个标题，以及一个可以放置其他组件的内容区域。当面板折叠时，标题仍然可见。与 tabSheet 标签面板 不同，折叠面板支持长标题。

样式版本

在线示例

使用 themeNames 设置组件的样式。

样式 描述 支持的主题

filled

面板使用填充背景样式。

Aura, Lumo

reverse

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

Aura, Lumo

small

面板较小。

Aura, Lumo

no-padding

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

Aura

XML 属性

下面是 accordion 和 accordionPanel 元素的 XML 属性：

accordion

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - visible - width

accordionPanel

id - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - opened - summaryText - themeNames - visible - width

opened

设置面板是否打开。

summaryText

为面板的内容设置标题。

事件和处理器

对于 accordion 和 accordionPanel，处理器相同。

AttachEvent - DetachEvent - OpenedChangeEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

OpenedChangeEvent

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

参考

Vaadin 文档