near_me
はじめる
keyboard_arrow_downwidgets
コンポーネント
keyboard_arrow_downlocal_mall
リソース
keyboard_arrow_downMaterial Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。
ボトムナビゲーション
ボトムナビゲーションバーはページの下部に固定され、3 〜 5 個のオプションを持つことができます。通常はモバイルデバイスでのみ使用されます。1 つのページに配置できるボトムナビゲーションバーは 1 つだけです。
使用方法
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 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>