底部導航欄

2018-05-26 00:49 更新

底部導航欄固定在頁面底部，可以擁有 3 - 5 個選項。它通常只在手機上使用。每個頁面只能擁有一個底部導航欄。

只需編寫 HTML 即可生效。

樣式

下面的例子同時顯示圖標和文本，通常在只有 3 個導航項時使用。

含類 .mdui-bottom-nav-active 的導航項將處于默認激活狀態(tài)。

www.mdui.org - 底部導航欄 - 基本樣式

www.mdui.org - 底部導航欄 - 只顯示圖標

www.mdui.org - 底部導航欄 - 只顯示文本

在 <div class="mdui-bottom-nav"></div> 元素上添加類 .mdui-bottom-nav-text-auto 即可實現(xiàn)該效果。

一般在擁有 4 - 5 個導航項時，使用這種方式。默認只顯示圖標，在激活導航項后顯示文本。

www.mdui.org - 底部導航欄 - 只在激活狀態(tài)顯示文本

在 <div class="mdui-bottom-nav"></div> 元素上添加類 .mdui-color-[color] 即可為底部導航欄賦予背景色。

www.mdui.org - 底部導航欄 - 背景色

在 body 元素上添加類 .mdui-bottom-nav-fixed 即可將底部導航欄固定在頁面底部，不隨滾動條滾動。

這個類需要添加在 body 元素上，而不是 .mdui-bottom-nav 元素上，因為它除了固定應用欄外，還會為 body 添加 padding-bottom，使底部導航欄不會覆蓋頁面內(nèi)容。

添加類 .mdui-bottom-nav-scroll-hide 即可在頁面向下滾動時隱藏底部導航欄，向上滾動時顯示底部導航欄。

注意：若底部導航欄沒有固定在頁面底部，則該功能不會生效。

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

事件名	目標	描述	參數(shù)
change.mdui.bottomNav	<div class="mdui-bottom-nav"></div>	切換導航項時會觸發(fā)該事件。	event.detail.index：激活的導航項的索引號。

類名	效果
.mdui-bottom-nav	定義底部導航欄組件。
.mdui-bottom-nav-active	使導航項處于激活狀態(tài)。
.mdui-bottom-nav-text-auto	使導航欄只在激活狀態(tài)顯示文本。
.mdui-bottom-nav-fixed	使導航欄固定到頁面底部。
.mdui-bottom-nav-scroll-hide	在頁面向下滾動時隱藏底部導航欄，向上滾動時顯示底部導航欄。