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` では常に1枚だけ開きます

<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