확장 패널 (Expansion Panel)
v-expansion-panel 컴포넌트는 다량의 정보가 있을때 세로 공간을 줄이는데 유용합니다. 기본 기능은 단순히 확장 패널(expansion-panel)을 한번에 하나씩 보여줍니다. 하지만 expandable 속성(propertiy)를 사용하면 확장패널이 명시적으로 닫기 전까지 열려있게 할 수 있습니다.
API
다크 테마를 적용
Components.ExpansionPanels.
다른 패널을 선택해도 확장된 패널이 열려있도록 설정
확장패널의 헤더가 포커스 가능하도록 설정
확장패널을 인셋(inset) 스타일로 엽니다.
라이트 테마를 적용
확장패널을 팝업(popup) 스타일로 엽니다.
Components.ExpansionPanels.
표시여부를 조절 (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)
확장패널은 popout 과 inset prop과 함께 두가지 다른 형태로 활성화 됩니다.
Custom icon
expand-icon prop으로 확장 액션 아이콘을 커스터마이즈 합니다.
Icon slot
Expand action icon can be customized using actions slot.
포커스 가능 (Focusable)
focusable prop으로 확장패널 헤더의 포커스 가능 여부를 조절합니다.