Collapse접기
접기 패널 컴포넌트는 복잡한 콘텐츠 영역을 그룹화하고 숨겨 페이지를 깔끔하게 유지할 때 사용합니다.
접기 패널 컴포넌트 자체는 어떤 스타일도 포함하지 않으므로, 스타일을 직접 추가하거나 다른 컴포넌트와 함께 사용해야 합니다.
컴포넌트 가져오기:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
사용 예시:
first content
second content
<mdui-collapse>
<mdui-collapse-item header="first header">first content</mdui-collapse-item>
<mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>
<mdui-collapse-item> 컴포넌트의 header 속성으로 패널 헤더의 텍스트를 설정할 수 있으며, header 슬롯을 통해 패널 헤더 요소를 지정할 수도 있습니다. 컴포넌트의 default 슬롯은 패널 내용에 사용됩니다.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
소스
<mdui-collapse> 컴포넌트에 accordion 속성을 추가하면 아코디언 모드를 활성화하여 한 번에 하나의 패널만 열린 상태를 유지할 수 있습니다.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
소스
<mdui-collapse> 컴포넌트의 value 속성으로 현재 열려 있는 패널을 가져오거나 열 패널을 설정할 수 있습니다.
아코디언 모드에서는 value 속성값이 문자열입니다. HTML 속성 또는 JavaScript 속성을 사용해 이 속성을 조작할 수 있습니다. 비아코디언 모드에서는 value 속성값이 배열이며, 이 경우 JavaScript 속성으로서만 조작할 수 있습니다.
아코디언 모드
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
비아코디언 모드
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>아코디언 모드</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>비아코디언 모드</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
소스
<mdui-collapse> 컴포넌트에 disabled 속성을 추가하면 전체 접기 패널 그룹을 비활성화할 수 있습니다. 마찬가지로 <mdui-collapse-item> 컴포넌트에 disabled 속성을 추가하면 특정 접기 패널을 비활성화할 수 있습니다.
전체 비활성화
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
첫 번째 패널 비활성화
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>전체 비활성화</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>첫 번째 패널 비활성화</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
소스
기본적으로 패널 헤더 영역 전체를 클릭하면 접기가 트리거됩니다. <mdui-collapse-item> 컴포넌트의 trigger 속성을 설정하여 접기를 트리거할 요소를 지정할 수 있습니다. trigger 속성은 CSS 선택자 또는 DOM 요소가 될 수 있습니다.
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Item 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
소스| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
value | value | | string | - |
이 접기 항목의 값입니다.
|
이 접기 항목의 헤더 텍스트입니다.
|
disabled | disabled | | boolean | false |
이 접기 항목을 비활성화할지 여부를 설정합니다.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
이 요소를 클릭하면 접힙니다. 값은 CSS 선택자, DOM 요소 또는 JQ 객체가 될 수 있습니다. 기본값은 전체 헤더 영역을 클릭할 때 트리거됩니다.
|
| 이름 |
|---|
| 기본 |
접기 항목의 본문 콘텐츠
|
접기 항목의 헤더 콘텐츠
|
| 이름 |
|---|
접기의 헤더 콘텐츠
|
body |
접기의 본문 콘텐츠
|
| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
accordion | accordion | | boolean | false |
아코디언 모드를 활성화할지 여부를 설정합니다.
|
value | value | | string | string[] | - |
현재 펼쳐진 <mdui-collapse-item>의 값입니다.
참고: 이 프로퍼티의 HTML 속성 값은 항상 문자열이며, accordion이 true인 경우에만 HTML 속성을 통해 초기값을 설정할 수 있습니다. 이 프로퍼티의 JavaScript 프로퍼티 값은 accordion이 true일 때는 문자열, accordion이 false일 때는 문자열 배열입니다. 따라서 accordion이 false일 때는 JavaScript 프로퍼티를 통해서만 이 값을 변경할 수 있습니다.
|
disabled | disabled | | boolean | false |
이 접기를 비활성화할지 여부를 설정합니다.
|
| 이름 |
|---|
change |
현재 펼쳐진 접기 항목이 변경될 때 발생합니다.
|
| 이름 |
|---|
| 기본 |
<mdui-collapse-item> 컴포넌트
|
이전 장
CircularProgress 원형 프로그레스
