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


Expansion panels in their simplest form display a list of expandable items.



비활성화 (Disabled)

Both the expansion-panel and its content can be disabled using the disabled prop.


readonly prop does the same thing as disabled, but it doesn't touch styles.


The expansion-panel also has popout design. With it, expansion-panel is enlargened when activated.


inset expansion-panel becomes smaller when activated.


accordion expansion-panel hasn't got margins around active panel.

포커스 가능 (Focusable)

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

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 multiple prop is used then it is an array containing the indices of the open items.

Custom icon

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


The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.

Edit this page on Github | Translate on Crowdin