Collapse 折叠面板

可展开/折叠的内容区域，支持手风琴模式。

代码演示

普通模式

MiniDev Studio is a desktop IDE for building mini-apps with built-in simulator and debugger. Vue 3 SFC or vanilla JS — components are framework-agnostic Web Components. This item is disabled.

折叠面板

<m-collapse value='["item1"]'>
  <m-collapse-item name="item1" title="What is MiniDev?">
    MiniDev Studio is a desktop IDE...
  </m-collapse-item>
  <m-collapse-item name="item2" title="Which framework?">
    Vue 3 SFC or vanilla JS...
  </m-collapse-item>
  <m-collapse-item name="item3" title="Disabled" disabled>
    This item is disabled.
  </m-collapse-item>
</m-collapse>

手风琴模式

No install needed — components are built into the runtime. Override CSS Variables on :root or on individual components.

手风琴

accordion 模式每次只展开一个面板

<m-collapse value='"q1"' accordion>
  <m-collapse-item name="q1" title="How to install?">
    No install needed...
  </m-collapse-item>
  <m-collapse-item name="q2" title="Theme?">
    Override CSS Variables...
  </m-collapse-item>
</m-collapse>

API

Collapse

Collapse 属性

属性	说明	类型	默认值
value	当前展开面板的 name 数组（JSON）	string (json)	[]
accordion	是否为手风琴模式	boolean	false

CollapseItem

CollapseItem 属性

属性	说明	类型	默认值
name	唯一标识	string	-
title	标题	string	-
disabled	是否禁用	boolean	false