免費(fèi)AI編程助手
底部導(dǎo)航欄
底部導(dǎo)航欄固定在頁(yè)面底部，可以擁有 3 - 5 個(gè)選項(xiàng)。它通常只在手機(jī)上使用。每個(gè)頁(yè)面只能擁有一個(gè)底部導(dǎo)航欄。
調(diào)用方式
只需編寫(xiě) HTML 即可生效。
相關(guān)資料
Material Design 底部導(dǎo)航設(shè)計(jì)規(guī)范
樣式
基本樣式
下面的例子同時(shí)顯示圖標(biāo)和文本，通常在只有 3 個(gè)導(dǎo)航項(xiàng)時(shí)使用。
含類(lèi) .mdui-bottom-nav-active 的導(dǎo)航項(xiàng)將處于默認(rèn)激活狀態(tài)。
只顯示圖標(biāo)
只顯示文本
只在激活狀態(tài)顯示文本
在 <div class="mdui-bottom-nav"></div> 元素上添加類(lèi) .mdui-bottom-nav-text-auto 即可實(shí)現(xiàn)該效果。
一般在擁有 4 - 5 個(gè)導(dǎo)航項(xiàng)時(shí)，使用這種方式。默認(rèn)只顯示圖標(biāo)，在激活導(dǎo)航項(xiàng)后顯示文本。
背景色
在 <div class="mdui-bottom-nav"></div> 元素上添加類(lèi) .mdui-color-[color] 即可為底部導(dǎo)航欄賦予背景色。
固定到頁(yè)面底部
在 body 元素上添加類(lèi) .mdui-bottom-nav-fixed 即可將底部導(dǎo)航欄固定在頁(yè)面底部，不隨滾動(dòng)條滾動(dòng)。
這個(gè)類(lèi)需要添加在 body 元素上，而不是 .mdui-bottom-nav 元素上，因?yàn)樗斯潭☉?yīng)用欄外，還會(huì)為 body 添加 padding-bottom，使底部導(dǎo)航欄不會(huì)覆蓋頁(yè)面內(nèi)容。
自動(dòng)隱藏
添加類(lèi) .mdui-bottom-nav-scroll-hide 即可在頁(yè)面向下滾動(dòng)時(shí)隱藏底部導(dǎo)航欄，向上滾動(dòng)時(shí)顯示底部導(dǎo)航欄。
注意：若底部導(dǎo)航欄沒(méi)有固定在頁(yè)面底部，則該功能不會(huì)生效。
<body class="mdui-bottom-nav-fixed">
<div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide">
......
</div>
</body>事件
| 事件名 | 目標(biāo) | 描述 | 參數(shù) |
| change.mdui.bottomNav | <div class="mdui-bottom-nav"></div> | 切換導(dǎo)航項(xiàng)時(shí)會(huì)觸發(fā)該事件。 | event.detail.index：激活的導(dǎo)航項(xiàng)的索引號(hào)。 |
CSS 類(lèi)名列表
| 類(lèi)名 | 效果 |
| .mdui-bottom-nav | 定義底部導(dǎo)航欄組件。 |
| .mdui-bottom-nav-active | 使導(dǎo)航項(xiàng)處于激活狀態(tài)。 |
| .mdui-bottom-nav-text-auto | 使導(dǎo)航欄只在激活狀態(tài)顯示文本。 |
| .mdui-bottom-nav-fixed | 使導(dǎo)航欄固定到頁(yè)面底部。 |
| .mdui-bottom-nav-scroll-hide | 在頁(yè)面向下滾動(dòng)時(shí)隱藏底部導(dǎo)航欄，向上滾動(dòng)時(shí)顯示底部導(dǎo)航欄。 |
更多建議：