확장 패널 (Expansion Panel)

v-expansion-panel 컴포넌트는 다량의 정보가 있을때 세로 공간을 줄이는데 유용합니다. 기본 기능은 단순히 확장 패널(expansion-panel)을 한번에 하나씩 보여줍니다. 하지만 expandable 속성(propertiy)를 사용하면 확장패널이 명시적으로 닫기 전까지 열려있게 할 수 있습니다.

사용법

어커디언(또는 아코디언. 원래 악기입니다) 확장 패널은 한번에 하나의 패널만 열립니다.


API

v-expansion-panel
이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disabled
디폴트
false
타입
boolean
이름
expand
디폴트
false
타입
boolean

다른 패널을 선택해도 확장된 패널이 열려있도록 설정

이름
focusable
디폴트
false
타입
boolean

확장패널의 헤더가 포커스 가능하도록 설정

이름
inset
디폴트
false
타입
boolean

확장패널을 인셋(inset) 스타일로 엽니다.

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
popout
디폴트
false
타입
boolean

확장패널을 팝업(popup) 스타일로 엽니다.

이름
readonly
디폴트
false
타입
boolean
이름
value
디폴트
null
타입
number | array

표시여부를 조절 (Controls visibility)

예제

확장 (Expand)

확장된 확장 패널(Expand expansion panels)은 닫기 전까지 열려있습니다. will stay open until closed.


External control

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If expand prop is used then it is an array of booleans where the index corresponds to the index of the content.


Disabled and readonly

Both the expansion-panel and its content supports the disabled and readonly props.


팝업 & 인셋 (Popout & Inset)

확장패널은 popoutinset prop과 함께 두가지 다른 형태로 활성화 됩니다.


Custom icon

expand-icon prop으로 확장 액션 아이콘을 커스터마이즈 합니다.


포커스 가능 (Focusable)

focusable prop으로 확장패널 헤더의 포커스 가능 여부를 조절합니다.