Collapse

Collapse (접이식 패널)

출처: 문서

본문

Collapse

Collapse를 사용해서 내용을 저장해요.

기본 사용법

여러 패널을 펼칠 수 있어요.

import { ref } from 'vue'

import type { CollapseModelValue } from 'element-plus'

const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}

아코디언

아코디언 모드에서는 한 번에 하나의 패널만 펼칠 수 있어요. accordion 속성을 사용해서 아코디언 모드를 활성화해요.

import { ref } from 'vue'

const activeName = ref('1')

커스텀 제목

title 속성을 사용하는 것 외에 named slot으로 패널 제목을 커스터마이즈할 수 있어요. 이렇게 하면 아이콘 같은 커스텀 내용을 추가할 수 있어요.

TIP 2.9.10부터 title 슬롯은 현재 collapse 항목이 활성 상태인지 나타내는 isActive 속성을 제공해요.

import { InfoFilled } from '@element-plus/icons-vue'

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.title-wrapper.is-active {
  color: var(--el-color-primary);
}

커스텀 아이콘 2.8.3

icon 속성을 사용하는 것 외에 named slot으로 패널 항목의 아이콘을 커스터마이즈할 수 있어요. 이렇게 하면 커스텀 내용을 추가할 수 있어요.

import { ref } from 'vue'
import { CaretRight } from '@element-plus/icons-vue'

import type { CollapseModelValue } from 'element-plus'

const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}

.icon-ele {
  margin: 0 8px 0 auto;
  color: #409eff;
}

커스텀 아이콘 위치 2.9.10

expand-icon-position 속성을 사용해서 아이콘 위치를 커스터마이즈할 수 있어요.

import { ref } from 'vue'

import type { CollapseIconPositionType } from 'element-plus'

const position = ref('left')

접기 방지 2.9.11

before-collapse 속성을 설정해요. false를 반환하거나 Promise가 반환된 뒤 거부되면 접기가 중단돼요.

import { ref } from 'vue'

const before = ref(true)
const activeNames = ref(['1'])
const loading = ref(false)

const beforeCollapse = (): Promise => {
  loading.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      loading.value = false
      return resolve(before.value)
    }, 1000)
  })
}

Collapse API

Collapse Attributes

Collapse Events

Collapse Slots

Collapse Exposes

Collapse Item API

Collapse Item Attributes

Collapse Item Slot

Collapse Item Exposes

더 알아보기 (Learn more)