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

앱 바

앱 바는 일반적으로 페이지 상단에 위치하며 툴바, 탭 등의 컴포넌트를 포함할 수 있습니다. 한 페이지에는 하나의 앱 바만 가질 수 있습니다.

호출 방식

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

색상

앱 바에는 배경색이 포함되어 있지 않습니다. 앱 바의 하위 요소(툴바, 탭 등)에 배경색을 설정할 수 있습니다.

스타일

툴바만 포함

예시

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

탭만 포함

예시

<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

툴바 및 탭 포함

예시

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

예시

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

투명 배경

앱 바에서 그림자를 제거하려면 .mdui-shadow-0 클래스를 추가해야 합니다.

예시

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

페이지 상단에 고정

<div class="mdui-appbar"></div> 요소에 .mdui-appbar-fixed 클래스를 추가하면 앱 바를 페이지 상단에 고정하여 스크롤 시에도 유지할 수 있습니다.

앱 바가 페이지 내용을 가리지 않도록 body에 클래스를 추가해 body에 padding-top을 설정해야 합니다.

.mdui-appbar-with-toolbar: 앱 바에 툴바가 포함된 경우 이 클래스를 추가해야 합니다.
.mdui-appbar-with-tab: 앱 바에 탭이 포함된 경우 이 클래스를 추가해야 합니다.
.mdui-appbar-with-tab-larger: 앱 바에 아이콘과 텍스트가 모두 포함된 탭이 포함된 경우 이 클래스를 추가해야 합니다.

앱 바에 툴바와 탭 이외의 다른 요소가 있는 경우, 직접 body에 적절한 padding-top을 추가해야 합니다.

예시 1 예시 2 예시 3

앱 바 자동 숨기기

<div class="mdui-appbar"></div> 요소에 .mdui-appbar-scroll-hide 클래스를 추가하면 페이지를 아래로 스크롤할 때 앱 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다.

요소가 동적으로 생성된 경우, mdui.mutation()을 호출하여 초기화해야 합니다.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>

실행

앱 바의 툴바 자동 숨기기

<div class="mdui-appbar"></div> 요소에 .mdui-appbar-scroll-toolbar-hide 클래스를 추가하면, 앱 바에 툴바와 탭이 모두 포함된 경우 페이지를 아래로 스크롤할 때 툴바만 숨기고 위로 스크롤할 때 다시 표시합니다.