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

하단 내비게이션 바

하단 내비게이션 바는 페이지 하단에 고정되며, 3개에서 5개의 옵션을 가질 수 있습니다. 일반적으로 모바일에서만 사용됩니다. 한 페이지에는 하나의 하단 내비게이션 바만 가질 수 있습니다.

호출 방식

HTML만 작성하면 바로 적용됩니다.

스타일

기본 스타일

아래 예시는 아이콘과 텍스트를 동시에 표시하는 예시로, 일반적으로 내비게이션 항목이 3개일 때 사용됩니다.

.mdui-bottom-nav-active 클래스가 포함된 내비게이션 항목이 기본으로 활성화됩니다.

예시

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
    <label>Recents</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
    <label>Favorites</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
    <label>Nearby</label>
  </a>
</div>

아이콘만 표시

예시

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">history</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">favorite</i>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">location_on</i>
  </a>
</div>

텍스트만 표시

예시

<div class="mdui-bottom-nav">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">Recents</a>
  <a href="javascript:;" class="mdui-ripple">Favorites</a>
  <a href="javascript:;" class="mdui-ripple">Nearby</a>
</div>

활성 상태에서만 텍스트 표시

<div class="mdui-bottom-nav"></div> 요소에 .mdui-bottom-nav-text-auto 클래스를 추가하면 이 효과를 얻을 수 있습니다.

일반적으로 내비게이션 항목이 4개 또는 5개인 경우 이 방식을 사용합니다. 기본적으로 아이콘만 표시되며, 항목을 활성화하면 텍스트가 나타납니다.

예시

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a href="javascript:;" class="mdui-ripple mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:;" class="mdui-ripple">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

배경색

<div class="mdui-bottom-nav"></div> 요소에 .mdui-color-[color] 클래스를 추가하여 하단 내비게이션 바에 배경색을 부여할 수 있습니다.

예시

<div class="mdui-bottom-nav mdui-bottom-nav-text-auto mdui-color-brown">
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">live_tv</i>
    <label>Movies</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">music_note</i>
    <label>Music</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">book</i>
    <label>Books</label>
  </a>
  <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white">
    <i class="mdui-icon material-icons">library_books</i>
    <label>Newsstand</label>
  </a>
</div>

페이지 하단에 고정

body 요소에 .mdui-bottom-nav-fixed 클래스를 추가하면 하단 내비게이션 바를 페이지 하단에 고정하여 스크롤 시에도 유지할 수 있습니다.

이 클래스는 .mdui-bottom-nav 요소가 아닌 body 요소에 추가해야 합니다. 하단 내비게이션 바를 고정할 뿐만 아니라, body에 padding-bottom을 추가하여 내비게이션 바가 페이지 내용을 가리지 않도록 하기 때문입니다.

자동 숨기기

.mdui-bottom-nav-scroll-hide 클래스를 추가하면 페이지를 아래로 스크롤할 때 하단 내비게이션 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다.

주의:

하단 내비게이션 바가 페이지 하단에 고정되어 있지 않으면 이 기능이 작동하지 않습니다.
요소가 동적으로 생성된 경우, mdui.mutation()을 호출하여 초기화해야 합니다.

<body class="mdui-bottom-nav-fixed">
  <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
    ......
  </div>
</body>

실행

이벤트

이벤트 이름	대상	설명	매개변수
`change.mdui.bottomNav`	`<div class="mdui-bottom-nav"></div>`	내비게이션 항목을 전환할 때 이 이벤트가 발생합니다.	`event._detail.index`: 활성화된 내비게이션 항목의 인덱스 번호입니다.

CSS 클래스 목록

클래스 이름	설명
`.mdui-bottom-nav`	하단 내비게이션 바 컴포넌트를 정의합니다.
`.mdui-bottom-nav-active`	내비게이션 항목을 활성화 상태로 만듭니다.
`.mdui-bottom-nav-text-auto`	내비게이션 바가 활성화된 상태에서만 텍스트를 표시하도록 합니다.
`.mdui-bottom-nav-fixed`	내비게이션 바를 페이지 하단에 고정합니다(`body` 요소에 추가해야 함).
`.mdui-bottom-nav-scroll-hide`	페이지를 아래로 스크롤할 때 하단 내비게이션 바를 숨기고, 위로 스크롤할 때 표시합니다.

내비게이션 드로어

카드