发布于 2023-10-27, 作者: oxArch

Mata Toolkit 提供组件 Collapse (折叠面板)

Collapse可以实现对大量信息的折叠显示.

Collapse

使用

<Collapse>
    <Panel header="标题">
        ... 内容 ...
    </Panel>
</Collapse>
... 内容 ...

支持多个 Panel 在同一个 Collapse 中,效果:

Panel 1

Panel 2

Panel 3

手风琴

<Collapse type="accordion">
    <Panel header="Panel1">
        <h3>Panel 1</h3>
    </Panel>
    <Panel header="Panel2">
        <h3>Panel 2</h3>
    </Panel>
    <Panel header="Panel3">
        <h3>Panel 3</h3>
    </Panel>
</Collapse>

效果:

Panel 1

Panel 2

Panel 3

尺寸

支持通过size设定大小。

size = 1 size = 0 size = 2

对于JS:

提供 CollapseComponent 类用于构建 Collapse 标签.

NOTE 此选项暂不可用,因为关于 Collapse 的构建函数正在重写.

let collapsecomponent = new CollapseComponent([{"title":"标题","content":"内容"}]);
let collapse = collapsecomponent.renderHTMLElement();

目录


oxArch

文章

8

分类

4


BY 你需要在分享此文章时注明原作者.
SA 你需要在分享此文章时采用与此文章相同的协议.