The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.

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

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

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 prop으로 확장패널 헤더의 포커스 가능 여부를 조절합니다.

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.

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.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!