Collapse 접기 패널

아코디언 / 여러 항목을 펼치는 접기 그룹으로, APG accordion pattern에 엄격하게 맞춥니다.

기본 사용법

기본 사용법

페이지 전체와 일관된 시각과 인터랙션을 유지합니다.

조작 후 명확하고 즉각적인 상태 피드백을 제공합니다.

<script setup lang="ts">
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="일관성과 다양성">내용</LhCollapseItem>
    <LhCollapseItem name="b" title="피드백">내용</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="일관성과 다양성">내용</LhCollapseItem>
    <LhCollapseItem name="b" title="피드백">내용</LhCollapseItem>
  </LhCollapse>
</template>

아코디언

아코디언

동시에 최대 한 항목만 펼칠 수 있습니다.

모두 접힌 상태를 허용합니다.

<script setup lang="ts">
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="하나만 열기">내용</LhCollapseItem>
    <LhCollapseItem name="b" title="다시 클릭하면 접힘">내용</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="하나만 열기">내용</LhCollapseItem>
    <LhCollapseItem name="b" title="다시 클릭하면 접힘">내용</LhCollapseItem>
  </LhCollapse>
</template>

제어형 v-model과 비활성화 항목

v-model로 현재 펼쳐진 패널을 제어합니다(단일 값 또는 배열, accordion 모드에 따라 변화). disabled로 개별 패널을 비활성화합니다.

제어형 펼치기

제어 내용 A

비활성화 내용

제어 내용 C

<script setup>
import { ref } from 'vue'

const activeNames = ref(['a'])
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="패널 A">제어 내용 A</LhCollapseItem>
    <LhCollapseItem name="b" title="패널 B(비활성화)" disabled>비활성화 내용</LhCollapseItem>
    <LhCollapseItem name="c" title="패널 C">제어 내용 C</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {
  data() {
    return { activeNames: ['a'] }
  },
}
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="패널 A">제어 내용 A</LhCollapseItem>
    <LhCollapseItem name="b" title="패널 B(비활성화)" disabled>비활성화 내용</LhCollapseItem>
    <LhCollapseItem name="c" title="패널 C">제어 내용 C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

속성	설명	타입	기본값
modelValue	현재 활성 패널(제어형 v-model, 단일 값 또는 배열)	LhCollapseKey | LhCollapseKey[]	—
accordion	아코디언 모드: 동시에 하나만 펼침	boolean	false
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	콜백 매개변수
update:modelValue	펼쳐진 패널이 변경될 때 발생(제어형 v-model)	(value: LhCollapseKey | LhCollapseKey[])
change	펼쳐진 패널이 변경될 때 발생(비제어형, accordion에서는 단일 값)	(value: LhCollapseKey | LhCollapseKey[])

LhCollapseItem Props

속성	설명	타입	기본값
name	패널의 고유 식별자	string | number	—
title	제목(title 슬롯으로도 사용 가능)	string	—
disabled	비활성화	boolean	false
sx	sx 빠른 레이아웃 속성	LhSxProps	—

슬롯: title 제목, default 내용.

접근성

• APG accordion pattern에 맞춤: 제목은 실제 <button aria-expanded aria-controls>이고, 내용 영역은 role="region" + aria-labelledby를 사용합니다
• Enter / Space로 전환하며, 비활성화 항목은 네이티브 disabled로 상호작용에서 제외합니다
• 높이 전환에 CSS grid-template-rows: 0fr/1fr을 사용해(JS로 높이를 재지 않음) prefers-reduced-motion을 존중합니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/collapse/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhCollapseProps

/** 접기 패널 props */
export interface LhCollapseProps {
  /** 현재 활성 패널(제어형 v-model: 아코디언 단일 값을 위해 Omit 사용) */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** 아코디언 모드: 동시에 하나만 펼침 */
  accordion?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhCollapseItemProps

/** 패널 항목 props */
export interface LhCollapseItemProps {
  /** 패널 고유 식별자(필수) */
  name: LhCollapseKey
  /** 제목(title 슬롯으로도 사용 가능) */
  title?: string
  disabled?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhCollapseKey _{(@lh-ui/share/core/collapse에서 가져옴)}

export type LhCollapseKey = string | number