折叠面板

折叠面板是一种常用的交互组件，用于在页面上展示和隐藏内容。它通常由一个标题和一个内容区域组成。用户点击标题时，内容区域会展开或折叠，展示或隐藏其中的内容。

基本用法

  • Preview
  • Code
折叠面板1
折叠面板内容1
折叠面板2
折叠面板内容2
折叠面板3
折叠面板内容3
折叠面板4
折叠面板内容4 
<div hx-ext="bny-collapse">
    <div class="item">
        <div class="title">折叠面板1</div>
        <div class="content">
            折叠面板内容1
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板2</div>
        <div class="content">
            折叠面板内容2
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板3</div>
        <div class="content">
            折叠面板内容3
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板4</div>
        <div class="content">
            折叠面板内容4
        </div>
    </div>
</div>

手风琴

  • Preview
  • Code
折叠面板1
折叠面板内容1
折叠面板2
折叠面板内容2
折叠面板3
折叠面板内容3
折叠面板4
折叠面板内容4 
<div hx-ext="bny-collapse" mode="accordion">
    <div class="item">
        <div class="title">折叠面板1</div>
        <div class="content">
            折叠面板内容1
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板2</div>
        <div class="content">
            折叠面板内容2
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板3</div>
        <div class="content">
            折叠面板内容3
        </div>
    </div>
    <div class="item">
        <div class="title">折叠面板4</div>
        <div class="content">
            折叠面板内容4
        </div>
    </div>
</div>

json

  • Preview
  • Code
  • Json
<div hx-ext="bny-collapse" hx-get="/test/data/collapse.json" hx-trigger="load"></div>
                
{
    "data": [
        {
            "id": 1,
            "title": "标题1",
            "content": "内容1"
        },
        {
            "id": 2,
            "title": "标题2",
            "content": "内容2",
            "attr": {
                "asd": "titzxcle"
            }
        },
        {
            "id": 3,
            "title": "标题3",
            "content": "内容3"
        }
    ]
}

API

标签属性

属性 默认值 必须 描述 版本
hx-ext bny-collapse 是 标签扩展名
model 否 折叠面板模型:'accordion'