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

工具列

工具列是水平排列的一組元件，可包含文字、連結、按鈕、圖示按鈕等元素。

呼叫方式

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

色彩

預設為透明背景，新增類別 .mdui-color-[color] 即可設定背景色。

相關閱讀

Material Design 設計規範：元件 - 工具列

Material Design 設計規範：結構 - 工具列

樣式

基礎樣式

在工具列中可以放置：

  • 文字：<span>Title</span>
  • 連結：<a href="#">Link</a>
  • 按鈕：<a href="#" class="mdui-btn">button</a>
  • 圖示按鈕：<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
  • 圖示：<i class="mdui-icon material-icons">menu</i>

新增 <div class="mdui-toolbar-spacer"></div> 會將該元素兩邊的內容推向兩側。

codeplay_arrow
範例
<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <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>

背景色

codeplay_arrow
範例
<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>
  <span class="mdui-typo-title">Title</span>
  <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>

CSS 類別清單

類別名稱說明
.mdui-toolbar定義一個工具列。
.mdui-toolbar-spacer該元素兩邊的元素會被推到兩側。
arrow_backPrevious
分頁
arrow_forwardNext
應用程式列