spz-accordion 手风琴

• 对复杂区域进行分组和隐藏，保持页面的整洁。
• 手风琴是一种特殊的折叠面板，允许单/多个内容区域同时展开。

最基础的用法，默认展开第一个内容块。使用需要遵循以下规范：

• 子元素必须写在 <section> 标签内才有效。
• 在 section 元素内部，必须有两个子元素：
  • 第一个子元素表示可点击展开的区域。
  • 第二个子元素表示内容区域。

当内容区域展开时，section 元素会自动加上 expanded 属性。

<spz-accordion layout="container" expand-single-section>
  <section expanded>
    <h3>Header 1</h3>
    <div>Section content 1</div>
  </section>
  <section>
    <h3>Header 2</h3>
    <div>Section content 2</div>
  </section>
  <section>
    <h3>Header 3</h3>
    <div>Section content 3</div>
  </section>
</spz-accordion>

使用方法来展开/折叠面板。当有面板展开或折叠时，使用事件来显示当前操作可见性。

<div class="api-status">
  Toggle status:
  <span hidden id="operation-expand">Expand</span>
  <span id="operation-collapse">Collapse</span>
</div>

<spz-accordion id="accordion-api" layout="container" expand-single-section @expand="operation-collapse.hide;operation-expand.show;" @collapse="operation-collapse.show;operation-expand.hide;">
  <section expanded>
    <h3>Header 1</h3>
    <div>Section content 1</div>
  </section>
  <section id="accordion-section2">
    <h3>Header 2</h3>
    <div>Section content 2</div>
  </section>
  <section>
    <h3>Header 3</h3>
    <div>Section content 3</div>
  </section>
</spz-accordion>

<div class="api-buttons">
  <button @tap="accordion-api.toggle(section='accordion-section2')">Toggle "Header 2"</button>
  <button @tap="accordion-api.expand(section='accordion-section2')">Expand "Header 2"</button>
  <button @tap="accordion-api.collapse(section='accordion-section2')">Collapse "Header 2"</button>
  <button @tap="accordion-api.disabled(section='accordion-section2')">Disabled "Header 2"</button>
  <button @tap="accordion-api.enable(section='accordion-section2')">Enable "Header 2"</button>
</div>

• 当 section 的内容区域展开时，调用 toggle 方法后该内容区域折叠；
• 当 section 的内容区域折叠时，调用 toggle 方法后该内容区域展开；

当 section 的内容区域折叠时，调用 expand 方法后该内容区域展开。

当 section 的内容区域展开时，调用 collapse 方法后该内容区域折叠。

当 section 的内容可点击展开区域禁用时，调用 enable 方法后可点击展开区域恢复可点击展开/折叠。

调用 disabled 方法后可点击展开区域禁用，点击行为无效，点击后不会展开/折叠内容。

当有 section 元素展开时自动触发该事件，不需要参数。

当有 section 元素折叠时自动触发该事件，不需要参数。