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

접기 패널

호출 방식

  1. 사용자 정의 속성을 통한 호출 (컴포넌트가 동적으로 생성된 경우, 초기화를 위해 mdui.mutation()을 호출해야 함)
  2. JavaScript를 통한 호출

관련 읽기

Material Design 가이드라인: 컴포넌트 - 접기 패널

스타일

전체 HTML 구조

이 예제는 포함될 수 있는 모든 HTML 요소를 포함합니다.

codeplay_arrow
예시
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

최소 HTML 구조

위 예제의 일부 요소는 필수사항이 아니며, 아래 예제는 필수 HTML 요소만 포함합니다.

codeplay_arrow
예시
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

기본으로 열려 있는 패널 항목

<div class="mdui-panel-item"></div> 요소에 .mdui-panel-item-open 클래스를 추가하면 해당 패널 항목이 기본적으로 열린 상태가 됩니다.

codeplay_arrow
예시
<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

패널 간격 제거

<div class="mdui-panel"></div> 요소에 .mdui-panel-gapless 클래스를 추가하면 열린 패널과 다른 패널 사이의 간격을 제거할 수 있습니다.

codeplay_arrow
예시
<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

팝아웃 패널

<div class="mdui-panel"></div> 요소에 .mdui-panel-popout 클래스를 추가하면 열린 패널에 팝아웃 효과를 줄 수 있습니다.

codeplay_arrow
예시
<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

패널 중첩

접기 패널은 서로 중첩될 수 있습니다.

codeplay_arrow
예시
<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- 첫 번째 중첩된 접기 패널 -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- 두 번째 중첩된 접기 패널 -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

호출 방식

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

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

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

codeplay_arrow
예시
<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

접기 패널 내의 요소에 속성을 추가하여 이벤트를 바인딩할 수 있으며, 이 속성들은 JavaScript 호출 방식에서도 사용할 수 있습니다.

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

JavaScript를 통한 호출

컴포넌트 인스턴스화:

// selector는 .mdui-panel 요소의 CSS 선택자 또는 DOM 요소입니다.
// options는 플러그인의 파라미터이며, 아래의 파라미터 목록을 참조하십시오.
var inst = new mdui.Panel(selector, options);
실행

매개변수

매개변수 이름유형기본값설명
accordionbooleanfalse아코디언 효과 활성화 여부.
  • true인 경우, 한 번에 하나의 패널 항목만 열 수 있으며, 다른 패널 항목을 열 때 기존에 열려 있던 패널 항목이 닫힙니다.
  • false인 경우, 여러 패널 항목을 동시에 열 수 있습니다.

메서드

메서드 이름설명
open(item)패널 항목 열기.
  • item: 패널 항목의 인덱스 번호, DOM 요소 또는 CSS 선택자.
close(item)패널 항목 닫기.
  • item: 패널 항목의 인덱스 번호, DOM 요소 또는 CSS 선택자.
toggle(item)패널 항목 상태 전환.
  • item: 패널 항목의 인덱스 번호, DOM 요소 또는 CSS 선택자.
openAll()모든 패널 항목 열기. 이 메서드는 accordion이 false일 때만 유효합니다.
closeAll()모든 패널 항목 닫기.

이벤트

이벤트 이름설명대상매개변수
open.mdui.panel패널 항목의 열기 애니메이션이 시작될 때 이벤트가 발생합니다.<div class="mdui-panel-item"></div>event._detail.inst: 인스턴스
opened.mdui.panel패널 항목의 열기 애니메이션이 끝날 때 이벤트가 발생합니다.
close.mdui.panel패널 항목의 닫기 애니메이션이 시작될 때 이벤트가 발생합니다.
closed.mdui.panel패널 항목의 닫기 애니메이션이 끝날 때 이벤트가 발생합니다.

CSS 클래스 목록

클래스 이름설명
.mdui-panel접기 패널을 정의합니다.
.mdui-panel-gapless열린 패널과 다른 패널 사이의 간격을 제거합니다.
.mdui-panel-popout열린 패널에 팝아웃 효과를 줍니다.
.mdui-panel-item접기 패널의 항목을 정의합니다.
.mdui-panel-item-open패널 항목을 기본적으로 열린 상태로 만듭니다.
.mdui-panel-item-header패널 항목의 헤더를 정의합니다.
.mdui-panel-item-title패널 항목 헤더의 제목을 정의합니다.
.mdui-panel-item-summary패널 항목 헤더의 요약을 정의합니다.
.mdui-panel-item-arrow패널 항목의 확장/축소 아이콘을 정의합니다.
.mdui-panel-item-body패널 항목의 콘텐츠를 정의합니다.
.mdui-panel-item-actions패널 항목의 작업 표시줄을 정의합니다.
arrow_backPrevious
구분선
arrow_forwardNext
텍스트 필드