menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

アプリバー

トップアプリバーは通常ページの上部に配置され、ツールバーやタブなどのコンポーネントを含めることができます。1つのページに配置できるトップアプリバーは1つだけです。

使用方法

トップアプリバーコンポーネントは純粋な CSS で記述されており、HTML を書くだけで有効になります。

カラー

トップアプリバーには背景色が含まれていません。トップアプリバーの子要素（ツールバー、タブなど）に背景色を設定できます。

関連情報

Material Design デザインガイドライン：構造 - トップアプリバー

スタイル

ツールバーのみ

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

タブのみ

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

ツールバーとタブを含む

codeplay_arrow
例
<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>
codeplay_arrow
例
<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 を追加する必要があります。

codeplay_arrow
例
<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 を追加すると、アプリバーにツールバーとタブの両方が含まれている場合、ページを下にスクロールしたときにツールバーを隠し、上にスクロールしたときに表示できます。

要素が動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります。

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

CSS クラス一覧

クラス名説明
.mdui-appbarトップアプリバーを定義します。
.mdui-appbar-fixedトップアプリバーをページ上部に固定します。
.mdui-appbar-with-toolbarトップアプリバーにツールバーが含まれている場合、body にこのクラスを追加する必要があります。
.mdui-appbar-with-tabトップアプリバーにタブが含まれている場合、body にこのクラスを追加する必要があります。
.mdui-appbar-with-tab-largerトップアプリバーにアイコンとテキストの両方を持つタブが含まれている場合、body にこのクラスを追加する必要があります。
.mdui-appbar-scroll-hideページを下にスクロールしたときにトップアプリバーを隠し、上にスクロールしたときにトップアプリバーを表示します。
.mdui-appbar-scroll-toolbar-hideトップアプリバーにツールバーとタブの両方が含まれている場合、ページを下にスクロールしたときにツールバーを隠し、上にスクロールしたときに表示します。
arrow_backPrevious
ツールバー
arrow_forwardNext
ドロワー