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	현재 활성 패널이 변화할 때 발생	현재 활성값. 아코디언은 단일 값, 그 외는 배열