Collapse 折りたたみパネル

展開 / 折りたたみが可能な内容エリアです。アコーディオンモード（同時に一つだけ展開）と v-model による制御をサポートします。

折りたたみパネル

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">複数を同時に展開可能</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="宋代">
        <p class="demo-note">範寛『溪山行旅図』、郭熙『早春図』。</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="元代">
        <p class="demo-note">黄公望『富春山居図』。</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="明代" disabled>
        <p class="demo-note">無効化されたパネル。</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">アコーディオンモード（同時に一つだけ展開）</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="工筆">
        <p class="demo-note">精緻な描線で、幾層にも重ねて彩色します。</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="写意">
        <p class="demo-note">筆致を奔放にし、形似を求めません。</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">現在展開中：{{ Array.isArray(actives) ? actives.join('、') : actives }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ actives: ['song'], active: 'gongbi' }),
}
</script>

Collapse Props

プロパティ	説明	型	デフォルト値
v-model	現在アクティブなパネル（制御される modelValue prop）	string \| number \| (string \| number)[]	—
accordion	アコーディオンモード：同時に一つだけ展開	boolean	false
sx	sx によるレイアウト省略記法	—	—

CollapseItem Props

プロパティ	説明	型	デフォルト値
name	パネルの一意識別子（必須）	string \| number	—
title	タイトル（title スロットも使用可能）	string	''
disabled	展開を無効化	boolean	false
sx	sx によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
change	現在アクティブなパネルが変化したときに発火	現在のアクティブ値。アコーディオンの場合は単一の値、それ以外は配列