折叠组件

简介

abp-collapse-body是用于显示和隐藏内容的主容器。abp-collapse-id用于控制内容容器的显示与隐藏。可通过abp-button按钮和a标签触发。

基础用法：

<abp-button button-type="Primary" abp-collapse-id="collapseExample" text="带data-target的按钮" />
<a abp-button="Primary" abp-collapse-id="collapseExample"> 带href的链接 </a>

<abp-collapse-body id="collapseExample">       
                   这里是动态显示/隐藏的内容区域...Anim pariatur wolf moon tempor...包含示例文本内容。
</abp-collapse-body>

演示

查看折叠组件演示页面观看实际效果。

属性说明

show

控制折叠内容区域初始化为显示或隐藏状态。可选值为：

• false（默认值）- 初始隐藏
• true - 初始显示

multi

控制abp-collapse-body是否支持通过单个元素显示/隐藏多个折叠内容区域。该属性实际上会为abp-collapse-body添加"multi-collapse"类。可选值为：

• false（默认值）- 不支持多目标控制
• true - 支持多目标控制

示例：

<a abp-button="Primary" abp-collapse-id="FirstCollapseExample"> 切换第一个元素 </a>
<abp-button button-type="Primary" abp-collapse-id="SecondCollapseExample" text="切换第二个元素" />
<abp-button button-type="Primary" abp-collapse-id="FirstCollapseExample SecondCollapseExample" text="同时切换两个元素" />
        
<abp-row class="mt-3">
    <abp-column size-sm="_6">
        <abp-collapse-body id="FirstCollapseExample" multi="true">
               Curabitur porta porttitor libero eu luctus. Praesent ultrices mattis commodo. Integer sodales massa risus, in molestie enim sagittis blandit
        </abp-collapse-body>
    </abp-column>
    <abp-column size-sm="_6">
        <abp-collapse-body id="SecondCollapseExample" multi="true">
                Anim pariatur wolf moon tempor...包含示例文本内容。
        </abp-collapse-body>
    </abp-column>
</abp-row>

手风琴示例

abp-accordion是手风琴项目的主容器。

基础用法：

<abp-accordion>
    <abp-accordion-item title="可折叠组项目 #1">
                Anim pariatur cliche reprehenderit...包含详细描述文本内容。
    </abp-accordion-item>
    <abp-accordion-item title="可折叠组项目 #2">
                Anim pariatur cliche reprehenderit...包含详细描述文本内容。
    </abp-accordion-item>
    <abp-accordion-item title="可折叠组项目 #3">
                Anim pariatur wolf moon tempor...包含详细描述文本内容。
    </abp-accordion-item>
</abp-accordion>

手风琴属性

active

控制手风琴项目初始化为展开或折叠状态。可选值为：

• false（默认值）- 初始折叠
• true - 初始展开

title

定义手风琴项目显示的标题文本。应为字符串值。