Cuttlefish Docs
  • 简体中文

    • spz-accordion 手风琴

    支持布局: container

    何时使用

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

    代码演示

    基本用法

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

    • 子元素必须写在 <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>

    属性

    属性名说明类型默认值是否必需
    expand-single-section如果该属性存在，点击未展开区域，其他展开区域收起，同一时刻仅能单个面板展开--否
    animate如果该属性存在，面板展开有动画效果--否
    expanded展开的 <section> 元素会自动加上该属性---
    disabled存在此属性的区域不能通过点击展开/收起--否

    方法

    toggle

    • 当 section 的内容区域展开时，调用 toggle 方法后该内容区域折叠；
    • 当 section 的内容区域折叠时，调用 toggle 方法后该内容区域展开；
    参数说明类型默认值是否必须
    sectionsection 元素的IDstring-是

    expand

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

    参数说明类型默认值是否必须
    sectionsection 元素的IDstring-是

    collapse

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

    参数说明类型默认值是否必须
    sectionsection 元素的IDstring-是

    enable

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

    参数说明类型默认值是否必须
    sectionsection 元素的IDstring-是

    disabled

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

    参数说明类型默认值是否必须
    sectionsection 元素的IDstring-是

    事件

    event 对象数据

    属性说明类型
    index当前触发事件的section元素索引number

    expand

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

    collapse

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

    AI 摘要（LLM Ready）

    • 组件标识：spz-accordion
    • 用途一句话：可以折叠或展开的内容区域。
    • 可识别属性条目：4
    • 可识别方法小节：5
    • 可识别事件小节：3
    • 关键属性名（Top）：expand-single-section、animate、expanded、disabled
    • 关键方法名（Top）：toggle、expand、collapse、enable、disabled
    • 关键事件名（Top）：expand、collapse
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/