머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

접기

접기(Collapse) 플러그인은 콘텐츠 블록을 펼치거나 접는 데 사용됩니다.

이 플러그인 자체에는 스타일이 포함되어 있지 않으므로, 직접 스타일을 작성하거나 다른 컴포넌트와 함께 사용해야 합니다.

호출 방식

(컴포넌트가 동적으로 생성된 경우, mdui.mutation()을 호출하여 초기화해야 합니다.)
JavaScript를 통한 호출

HTML 구조

가장 기본적인 HTML 구조입니다:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

.mdui-collapse-item-open 클래스를 추가하면 콘텐츠 블록이 기본적으로 펼쳐진 상태로 유지됩니다:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

.mdui-collapse-item-arrow 클래스가 포함된 요소는 콘텐츠 블록이 펼쳐질 때 180도 회전합니다:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

호출 방식

사용자 정의 속성을 통한 호출

이 방식을 사용하면 JavaScript 코드를 작성할 필요가 없습니다. <div class="mdui-collapse"></div> 요소에 mdui-collapse="options" 속성을 추가하기만 하면 플러그인이 활성화됩니다.

컴포넌트가 동적으로 생성된 경우, mdui.mutation()을 호출하여 초기화해야 합니다.

예시

<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- 중첩된 요소 -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Collapse 내의 요소에 속성을 추가하여 이벤트를 바인딩할 수 있으며, 이는 JavaScript로 호출할 때도 사용할 수 있습니다.

속성	설명
`mdui-collapse-item-close`	이 요소를 클릭하면 `close.mdui.collapse` 이벤트가 발생하고 해당 요소가 속한 패널이 닫힙니다.

JavaScript를 통한 호출

플러그인 인스턴스화:

// selector는 요소의 CSS 선택자 또는 DOM 요소
// options는 플러그인 매개변수이며, 아래 매개변수 목록을 참조하십시오
var inst = new mdui.Collapse(selector, options);

demo

매개변수

매개변수 이름	유형	기본값	설명
`accordion`	`boolean`	`false`	아코디언 효과 활성화 여부. `true`이면 최대 하나의 콘텐츠 블록만 열릴 수 있으며, 하나를 열면 다른 블록이 닫힙니다. `false`이면 여러 콘텐츠 블록을 동시에 열 수 있습니다.

메서드

메서드 이름	설명
`open(item)`	콘텐츠 블록을 엽니다. `item`: 콘텐츠 블록의 인덱스 번호, DOM 요소 또는 CSS 선택자입니다.
`close(item)`	콘텐츠 블록을 닫습니다. `item`: 콘텐츠 블록의 인덱스 번호, DOM 요소 또는 CSS 선택자입니다.
`toggle(item)`	콘텐츠 블록의 상태를 전환합니다. `item`: 콘텐츠 블록의 인덱스 번호, DOM 요소 또는 CSS 선택자입니다.
`openAll()`	모든 콘텐츠 블록을 엽니다. 이 방법은 `accordion`이 `false`인 경우에만 유효합니다.
`closeAll()`	모든 콘텐츠 블록을 닫습니다.

이벤트

이벤트 이름	설명	대상	매개변수
`open.mdui.collapse`	콘텐츠 블록이 열리기 시작할 때 이벤트가 발생합니다.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: 인스턴스
`opened.mdui.collapse`	콘텐츠 블록의 열기 애니메이션이 끝났을 때 이벤트가 발생합니다.
`close.mdui.collapse`	콘텐츠 블록이 닫히기 시작할 때 이벤트가 발생합니다.
`closed.mdui.collapse`	콘텐츠 블록의 닫기 애니메이션이 끝났을 때 이벤트가 발생합니다.

더 많은 예제

하위 목록

예시

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>

프로그레스 바

Headroom