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

메뉴

메뉴는 단순 메뉴와 계층형 메뉴로 나뉩니다. 단순 메뉴는 모바일 및 태블릿에 적합하고, 계층형 메뉴는 데스크톱 기기에 적합합니다.

호출 방식

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

스타일

단순 메뉴

메뉴 항목에 disabled 속성을 추가하여 해당 메뉴 항목을 비활성화할 수 있습니다.

추가 <li class="mdui-divider"></li> 요소를 추가하여 구분선을 추가할 수 있습니다.

예시

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

아이콘이 있는 단순 메뉴

예시

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

계층형 메뉴

<ul class="mdui-menu"> 요소에 .mdui-menu-cascade 클래스를 추가하면 데스크톱 기기에 적합한 계층형 메뉴로 바뀝니다.

<li class="mdui-menu-item"></li> 요소 내에 다른 메뉴를 추가하는 방식으로 메뉴 중첩을 구현할 수 있으며, 이론적으로 무한 중첩을 지원합니다.

<span class="mdui-menu-item-helper"></span> 요소는 메뉴 항목에 짧은 설명을 추가합니다.

<span class="mdui-menu-item-more"></span> 요소는 하위 메뉴가 있는 메뉴 항목에 오른쪽 화살표를 추가합니다.

예시

<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

호출 방식

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

이 방식을 사용하면 JavaScript 코드를 작성할 필요가 없습니다. 트리거 역할을 하는 요소(예: 버튼)에 mdui-menu="options" 속성을 추가하기만 하면 됩니다. 사용자 정의 속성을 통해 호출할 때, 제어할 메뉴를 지정하기 위해 target 매개변수를 추가로 입력해야 하며, 값은 제어할 메뉴의 CSS 선택자입니다.

주의: 메뉴가 올바르게 위치하도록 하려면 메뉴와 메뉴를 트리거하는 요소가 동일한 부모 요소 아래의 동일한 계층에 있어야 합니다.

예시

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

예시

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript를 통한 호출

컴포넌트 인스턴스화:

// anchorSelector는 메뉴를 트리거하는 요소의 CSS 선택자 또는 DOM 요소를 나타냅니다.
// menuSelector는 메뉴의 CSS 선택자 또는 DOM 요소를 나타냅니다.
// options는 컴포넌트의 설정 매개변수를 나타내며, 아래의 매개변수 목록을 참조하세요.
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

실행

매개변수

매개변수 이름	유형	기본값	설명
`position`	`string`	`auto`	트리거 요소에 대한 메뉴의 상대적 위치. `top`: 메뉴가 트리거 요소 위에 위치합니다. `bottom`: 메뉴가 트리거 요소 아래에 위치합니다. `center`: 메뉴가 창의 세로 중앙에 위치합니다. `auto`: 위치를 자동으로 판단합니다. 우선순위: `bottom` > `top` > `center`.
`align`	`string`	`auto`	트리거 요소와 메뉴의 정렬 방식. `left`: 메뉴가 트리거 요소와 왼쪽 정렬됩니다. `right`: 메뉴가 트리거 요소와 오른쪽 정렬됩니다. `center`: 메뉴가 창에서 가로 중앙에 위치합니다. `auto`: 위치를 자동으로 판단합니다. 우선순위: `left` > `right` > `center`.
`gutter`	`int`	`16`	메뉴와 창 경계 사이에 최소한으로 유지할 간격 (단위: px).
`fixed`	`boolean`	`false`	메뉴의 위치 지정 방식 `true`: 메뉴가 fixed 위치 지정을 사용합니다. 페이지 스크롤 시 메뉴는 창의 고정된 위치에 유지되며 스크롤 바를 따라 스크롤되지 않습니다. `false`: 메뉴가 absolute 위치 지정을 사용합니다. 페이지 스크롤 시 메뉴는 페이지와 함께 스크롤됩니다.
`covered`	`boolean`	`auto`	메뉴가 트리거 요소 위를 덮을지 여부. `true`: 메뉴가 트리거 요소 위를 덮게 합니다. `false`: 메뉴가 트리거 요소를 덮지 않게 합니다. `auto`: 단순 메뉴는 트리거 요소를 덮습니다. 계층형 메뉴는 트리거 요소를 덮지 않습니다.
`subMenuTrigger`	`string`	`hover`	하위 메뉴 트리거 방식. `click`: 클릭 시 하위 메뉴를 트리거합니다. `hover`: 마우스 호버 시 하위 메뉴를 트리거합니다.
`subMenuDelay`	`int`	`200`	하위 메뉴 트리거 지연 시간 (단위: 밀리초), subMenuTrigger: hover일 때만 유효합니다.

메서드

메서드 이름	설명
`open()`	메뉴 열기.
`close()`	메뉴 닫기.
`toggle()`	메뉴 열림 상태 전환.

이벤트

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

CSS 클래스 목록

클래스 이름	설명
`.mdui-menu`	메뉴 컴포넌트 정의.
`.mdui-menu-cascade`	계층형 메뉴 정의.
`.mdui-menu-item`	메뉴 항목 정의.
`.mdui-menu-item-icon`	메뉴 아이콘 정의.
`.mdui-menu-item-helper`	메뉴의 도움말 텍스트 정의.
`.mdui-menu-item-more`	하위 메뉴가 있는 메뉴 항목의 오른쪽 화살표.

다이알로그

프로그레스 바

메뉴

호출 방식

관련 읽기

스타일

단순 메뉴

아이콘이 있는 단순 메뉴

계층형 메뉴

호출 방식

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

JavaScript를 통한 호출

매개변수

메서드

이벤트

CSS 클래스 목록