Collapse

Expandable and collapsible sections; supports accordion mode.

Code examples

Default mode

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.

Collapse

<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>

Accordion mode

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

Accordion

In accordion mode, only one panel is open at a time

<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 props

属性	说明	类型	默认值
value	JSON string of opened panel `name` values	string (json)	[]
accordion	Enable accordion mode	boolean	false

CollapseItem

CollapseItem props

属性	说明	类型	默认值
name	Unique key	string	-
title	Header title	string	-
disabled	Whether the item is disabled	boolean	false