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

접기 패널

호출 방식

  1. 툴바는 텍스트, 링크, 버튼, 아이콘 버튼 등의 요소를 포함할 수 있는 수평으로 배열된 컴포넌트의 집합입니다.
  2. JavaScript를 통한 호출

관련 읽기

툴바 컴포넌트는 순수 CSS로 작성되었으며, 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>

기본 배경은 투명하며, <code>.mdui-color-<span mdui-tooltip="{content: '색상 이름'}">[color]</span></code> 클래스를 추가하여 배경색을 설정할 수 있습니다.

텍스트: <code>&lt;span&gt;Title&lt;/span&gt;</code>

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>

Material Design 가이드라인: 컴포넌트 - 툴바

링크: <a href="#">Link</a>

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>

Material Design 가이드라인: 구조 - 툴바

버튼: <a href="#" class="mdui-btn">button</a>

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>

기본 스타일

아이콘 버튼: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>

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>

배경색

아이콘: <code>&lt;i class=&quot;mdui-icon material-icons&quot;&gt;menu&lt;/i&gt;</code>

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>

      <!-- <code>&lt;div class=&quot;mdui-toolbar-spacer&quot;&gt;&lt;/div&gt;</code>를 추가하면 해당 요소 양쪽의 콘텐츠를 양 끝으로 밀어냅니다. -->
      <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>

호출 방식

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

이 요소의 양쪽 요소가 양 끝으로 밀려납니다.

구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.

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>

어두운 배경을 위한 밝은 구분선을 정의합니다.

속성설명
mdui-panel-item-close밝은 배경을 위한 어두운 구분선을 정의합니다.

JavaScript를 통한 호출

인셋 구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.

// 어두운 배경을 위한 밝은 인셋 구분선을 정의합니다.
// 밝은 배경을 위한 어두운 인셋 구분선을 정의합니다.
var inst = new mdui.Panel(selector, options);
실행

매개변수

매개변수 이름유형기본값설명
accordionbooleanfalse아바타는 목록의 오른쪽에 위치할 수 있습니다.
  • 아바타와 아이콘을 동시에 포함합니다.
  • 아바타 대신 아이콘을 사용합니다.

메서드

메서드 이름설명
open(item)각 목록 항목은 최대 3줄의 텍스트를 포함할 수 있으며, 3줄을 초과하는 경우 <a href="/ko/docs/1/card">카드</a>로 대체해야 합니다.
  • 기본적으로 텍스트 높이는 제한되지 않으며, 텍스트가 3줄을 초과하더라도 정상적으로 표시됩니다. .mdui-list-item-title 및 .mdui-list-item-text에 클래스를 추가하여 텍스트 높이를 제한할 수 있습니다:
close(item)<code>.mdui-list-item-one-line</code> 클래스 추가: 텍스트를 한 줄 높이로 제한
  • .mdui-list-item-two-line 클래스 추가: 텍스트를 두 줄 높이로 제한
toggle(item)<code>.mdui-list-item-three-line</code> 클래스 추가: 텍스트를 세 줄 높이로 제한
  • 목록의 구분선 위아래에 8px의 간격이 생깁니다.
openAll()구분선의 위아래 여백을 제거합니다.
closeAll()목록에서 소제목을 사용하면 소제목 위에 자동으로 구분선이 추가됩니다.

이벤트

이벤트 이름설명대상매개변수
open.mdui.panel인셋 소제목<div class="mdui-panel-item"></div>밀집형 목록은 각 요소가 더 촘촘하게 배치됩니다.
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
텍스트 필드