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

접기

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

툴바 컴포넌트는 순수 CSS로 작성되었으며, HTML 코드를 작성하는 것만으로 바로 적용됩니다.

호출 방식

  1. 색상
  2. JavaScript를 통한 호출

HTML 구조

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

<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>

기본 스타일

<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>

배경색

<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>

호출 방식

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

툴바에 배치할 수 있는 요소:

텍스트: <span>Title</span>

codeplay_arrow
예시
<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>

      <!-- 링크: <code>&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;</code> -->
      <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>

버튼: <code>&lt;a href=&quot;#&quot; class=&quot;mdui-btn&quot;&gt;button&lt;/a&gt;</code>

속성설명
mdui-collapse-item-close아이콘 버튼: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>

JavaScript를 통한 호출

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

// <code>&lt;div class=&quot;mdui-toolbar-spacer&quot;&gt;&lt;/div&gt;</code>를 추가하면 해당 요소 양쪽의 콘텐츠를 양 끝으로 밀어냅니다.
// 툴바를 정의합니다.
var inst = new mdui.Collapse(selector, options);
demo

매개변수

매개변수 이름유형기본값설명
accordionbooleanfalse이 요소의 양쪽 요소가 양 끝으로 밀려납니다.
  • 구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.
  • 어두운 배경을 위한 밝은 구분선을 정의합니다.

메서드

메서드 이름설명
open(item)밝은 배경을 위한 어두운 구분선을 정의합니다.
  • 인셋 구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.
close(item)어두운 배경을 위한 밝은 인셋 구분선을 정의합니다.
  • 밝은 배경을 위한 어두운 인셋 구분선을 정의합니다.
toggle(item)아바타는 목록의 오른쪽에 위치할 수 있습니다.
  • 아바타와 아이콘을 동시에 포함합니다.
openAll()아바타 대신 아이콘을 사용합니다.
closeAll()각 목록 항목은 최대 3줄의 텍스트를 포함할 수 있으며, 3줄을 초과하는 경우 <a href="/ko/docs/1/card">카드</a>로 대체해야 합니다.

이벤트

이벤트 이름설명대상매개변수
open.mdui.collapse기본적으로 텍스트 높이는 제한되지 않으며, 텍스트가 3줄을 초과하더라도 정상적으로 표시됩니다. <code>.mdui-list-item-title</code> 및 <code>.mdui-list-item-text</code>에 클래스를 추가하여 텍스트 높이를 제한할 수 있습니다:<div class="mdui-collapse-item"></div>.mdui-list-item-one-line 클래스 추가: 텍스트를 한 줄 높이로 제한
opened.mdui.collapse<code>.mdui-list-item-two-line</code> 클래스 추가: 텍스트를 두 줄 높이로 제한
close.mdui.collapse<code>.mdui-list-item-three-line</code> 클래스 추가: 텍스트를 세 줄 높이로 제한
closed.mdui.collapse목록의 구분선 위아래에 8px의 간격이 생깁니다.

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

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

code
예시
<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>
arrow_backPrevious
프로그레스 바
arrow_forwardNext
Headroom