ng-ytl-zorro-antd/src/showcase/nz-demo-collapse/nz-demo-collapse.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Collapse 折叠面板</h1>
    <section class="markdown"><p>可以折叠/展开的内容区域。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>

      <ul>
        <li><p>对复杂区域进行分组和隐藏，保持页面的整洁。</p></li>
        <li><p><code>手风琴</code> 是一种特殊的折叠面板，只允许单个内容区域展开。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'折叠面板'" id="components-collapse-demo-basic" [nzCode]="NzDemoCollapseBasicCode">
        <nz-demo-collapse-basic demo></nz-demo-collapse-basic>
        <div intro>
          <p>可以同时展开多个面板，这个例子默认展开了第一个。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'手风琴'" id="components-collapse-demo-accordion" [nzCode]="NzDemoCollapseAccordionCode">
        <nz-demo-collapse-accordion demo></nz-demo-collapse-accordion>
        <div intro>
          <p>手风琴，每次只打开一个tab。默认打开第一个。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'面板嵌套'" id="components-collapse-demo-nest" [nzCode]="NzDemoCollapseNestCode">
        <nz-demo-collapse-nest demo></nz-demo-collapse-nest>
        <div intro>
          <p>嵌套折叠面板。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'简洁风格'" id="components-collapse-demo-border" [nzCode]="NzDemoCollapseBorderCode">
        <nz-demo-collapse-border demo></nz-demo-collapse-border>
        <div intro>
          <p>一套没有边框的简洁样式。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义面板'" id="components-collapse-demo-custom" [nzCode]="NzDemoCollapseCustomCode">
        <nz-demo-collapse-custom demo></nz-demo-collapse-custom>
        <div intro>
          <p>自定义各个面板的背景色、圆角和边距。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h3 id="nz-collapseset"><span>nz-collapseset</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzBordered</td>
          <td>是否有边框</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzAccordion</td>
          <td>是否是手风琴类型</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
    <h3 id="Collapse.Panel"><span>nz-collapse</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzTitle</td>
          <td>面板头内容</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzActive</td>
          <td>当前tab是否被选中</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>当前tab是否禁止选中</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>[collapse-title]</td>
          <td>与nzTitle二选一，定义面板头内容</td>
          <td>ng-content</td>
          <td>无</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>