免費(fèi)AI編程助手
應(yīng)用欄
應(yīng)用欄通常位于頁(yè)面頂部，可以包含工具欄、Tab 選項(xiàng)卡等組件。一個(gè)頁(yè)面只能有一個(gè)應(yīng)用欄。
調(diào)用方式
應(yīng)用欄組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。
色彩
應(yīng)用欄不含背景色?？梢詾閼?yīng)用欄的子元素（工具欄、Tab 選項(xiàng)卡等）設(shè)置背景色。
相關(guān)資料
Material Design 應(yīng)用欄結(jié)構(gòu)設(shè)計(jì)規(guī)范
樣式
僅含工具欄
僅含 Tab 選項(xiàng)卡
含工具欄和 Tab 選項(xiàng)卡
透明背景
需要添加類 .mdui-shadow-0 取消應(yīng)用欄的陰影。
固定到頁(yè)面頂部
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-fixed 可以將應(yīng)用欄固定在頁(yè)面頂部，不隨滾動(dòng)條滾動(dòng)。
為了使應(yīng)用欄不覆蓋頁(yè)面內(nèi)容，需要在 body 上添加類來(lái)為 body 添加 padding-top：
- .mdui-appbar-with-toolbar：應(yīng)用欄中含工具欄時(shí)需要添加該類。
- .mdui-appbar-with-tab：應(yīng)用欄中含 Tab 選項(xiàng)卡時(shí)需要添加該類。
- .mdui-appbar-with-tab-larger：應(yīng)用欄中含同時(shí)又圖標(biāo)和文本的 Tab 選項(xiàng)卡時(shí)需要添加該類。
如果應(yīng)用欄中有除了工具欄和 Tab 選項(xiàng)卡外的其他元素，需要你自己為 body 添加適當(dāng)?shù)?nbsp;padding-top。
運(yùn)行示例1 運(yùn)行示例2 運(yùn)行示例3
自動(dòng)隱藏應(yīng)用欄
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-scroll-hide 可以在頁(yè)面向下滾動(dòng)時(shí)隱藏應(yīng)用欄，頁(yè)面向上滾動(dòng)時(shí)顯示應(yīng)用欄。
<body class="mdui-appbar-with-toolbar">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar">
......
</div>
</div>
</body>自動(dòng)隱藏應(yīng)用欄中的工具欄
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-scroll-toolbar-hide，在應(yīng)用欄中同時(shí)含有工具欄和 Tab 選項(xiàng)卡時(shí)，在頁(yè)面向下滾動(dòng)時(shí)隱藏工具欄，向上滾動(dòng)時(shí)顯示工具欄。
<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 | 定義一個(gè)應(yīng)用欄。 |
| .mdui-appbar-fixed | 使應(yīng)用欄固定到頁(yè)面頂部。 |
| .mdui-appbar-with-toolbar | 應(yīng)用欄中含工具欄時(shí)需要在 body 上添加該類 |
| .mdui-appbar-with-tab | 應(yīng)用欄中含 Tab 選項(xiàng)卡時(shí)需要在 body 上添加該類 |
| .mdui-appbar-with-tab-larger | 應(yīng)用欄中含同時(shí)又圖標(biāo)和文本的 Tab 選項(xiàng)卡時(shí)需要在 body 上添加該類 |
| .mdui-appbar-scroll-hide | 在頁(yè)面向下滾動(dòng)時(shí)隱藏應(yīng)用欄，向上滾動(dòng)時(shí)顯示應(yīng)用欄。 |
| .mdui-appbar-scroll-toolbar-hide | 在應(yīng)用欄中同時(shí)含有工具欄和 Tab 選項(xiàng)卡時(shí)，頁(yè)面向下滾動(dòng)時(shí)隱藏工具欄，向上滾動(dòng)時(shí)顯示工具欄。 |
更多建議：