基於 Material Design 3 與 Web Components 的全新 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 即可將底部導覽列固定在頁面底部，不隨捲動條捲動。

這個類別需要添加在 body 元素上，而不是 .mdui-bottom-nav 元素上，因為它除了固定底部導覽列外，還會為 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`	在頁面向下捲動時隱藏底部導覽列，向上捲動時顯示底部導覽列。

導覽抽屜

卡片