基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

應用程式列

應用程式列通常位於頁面頂部，可以包含工具列、分頁等元件。一個頁面只能有一個應用程式列。

呼叫方式

應用程式列元件使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

色彩

應用程式列不含背景色。可以為應用程式列的子元素（工具列、分頁等）設定背景色。

樣式

僅含工具列

範例

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

僅含分頁

範例

<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

含工具列和分頁

範例

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

範例

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

透明背景

需要添加類別 .mdui-shadow-0 取消應用程式列的陰影。

範例

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

固定到頁面頂部

在 <div class="mdui-appbar"></div> 上新增類別 .mdui-appbar-fixed 可將應用程式列固定在頁面頂部，不隨捲動條捲動。

為了使應用程式列不覆蓋頁面內容，需要在 body 上添加類別來為 body 添加 padding-top：

.mdui-appbar-with-toolbar：應用程式列中含工具列時需要添加該類別。
.mdui-appbar-with-tab：應用程式列中含分頁時需要添加該類別。
.mdui-appbar-with-tab-larger：應用程式列中同時含有圖示和文字的分頁時需要添加該類別。

如果應用程式列中有除了工具列和分頁外的其他元素，需要你自己為 body 添加適當的 padding-top。

範例 1 範例 2 範例 3

自動隱藏應用程式列

在 <div class="mdui-appbar"></div> 上添加類別 .mdui-appbar-scroll-hide 可以在頁面向下捲動時隱藏應用程式列，頁面向上捲動時顯示應用程式列。

若元素是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。

<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，在應用程式列中同時含有工具列與分頁時，頁面向下捲動時會隱藏工具列，向上捲動時則顯示工具列。