W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
應用欄
應用欄通常位于頁面頂部，可以包含工具欄、Tab 選項卡等組件。一個頁面只能有一個應用欄。
調(diào)用方式
應用欄組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。
色彩
應用欄不含背景色。可以為應用欄的子元素（工具欄、Tab 選項卡等）設置背景色。
相關資料
Material Design 應用欄結構設計規(guī)范
樣式
僅含工具欄
僅含 Tab 選項卡
含工具欄和 Tab 選項卡
透明背景
需要添加類 .mdui-shadow-0 取消應用欄的陰影。
固定到頁面頂部
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-fixed 可以將應用欄固定在頁面頂部，不隨滾動條滾動。
為了使應用欄不覆蓋頁面內(nèi)容，需要在 body 上添加類來為 body 添加 padding-top：
- .mdui-appbar-with-toolbar：應用欄中含工具欄時需要添加該類。
- .mdui-appbar-with-tab：應用欄中含 Tab 選項卡時需要添加該類。
- .mdui-appbar-with-tab-larger：應用欄中含同時又圖標和文本的 Tab 選項卡時需要添加該類。
如果應用欄中有除了工具欄和 Tab 選項卡外的其他元素，需要你自己為 body 添加適當?shù)?nbsp;padding-top。
自動隱藏應用欄
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-scroll-hide 可以在頁面向下滾動時隱藏應用欄，頁面向上滾動時顯示應用欄。
<body class="mdui-appbar-with-toolbar">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar">
......
</div>
</div>
</body>自動隱藏應用欄中的工具欄
在 <div class="mdui-appbar"></div> 上添加類 .mdui-appbar-scroll-toolbar-hide，在應用欄中同時含有工具欄和 Tab 選項卡時，在頁面向下滾動時隱藏工具欄，向上滾動時顯示工具欄。
<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 | 定義一個應用欄。 |
| .mdui-appbar-fixed | 使應用欄固定到頁面頂部。 |
| .mdui-appbar-with-toolbar | 應用欄中含工具欄時需要在 body 上添加該類 |
| .mdui-appbar-with-tab | 應用欄中含 Tab 選項卡時需要在 body 上添加該類 |
| .mdui-appbar-with-tab-larger | 應用欄中含同時又圖標和文本的 Tab 選項卡時需要在 body 上添加該類 |
| .mdui-appbar-scroll-hide | 在頁面向下滾動時隱藏應用欄，向上滾動時顯示應用欄。 |
| .mdui-appbar-scroll-toolbar-hide | 在應用欄中同時含有工具欄和 Tab 選項卡時，頁面向下滾動時隱藏工具欄，向上滾動時顯示工具欄。 |
- 內(nèi)容錯誤
- 更新不及時
- 鏈接錯誤
- 缺少代碼/圖片示列
- 太簡單/步驟待完善
- 其他
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話：173-0602-2364|舉報郵箱：jubao@eeedong.com
更多建議：