工具欄是一個(gè)水平排列的組件的集合，可以包含文本、鏈接、按鈕、圖標(biāo)按鈕等元素。

調(diào)用方式

工具欄組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。

色彩

默認(rèn)為透明背景，添加類 .mdui-color-[color] 可以設(shè)置背景色。

相關(guān)資料

Material Design 工具欄組件設(shè)計(jì)規(guī)范

Material Design 工具欄結(jié)構(gòu)設(shè)計(jì)規(guī)范

樣式

基礎(chǔ)樣式

在工具欄中可以放置：

• 文本：<span>Title</span>
  
• 鏈接：<a href="#">Link</a>
  
• 按鈕：<a href="#" class="mdui-btn">button</a>
  
• 圖標(biāo)按鈕：<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></a>
  
• 圖標(biāo)：<i class="mdui-icon material-icons">close</i>
  

添加 <div class="mdui-toolbar-spacer"></div> 會(huì)將該元素兩邊的內(nèi)容推向兩側(cè)。

在線運(yùn)行

背景色

在線運(yùn)行

CSS 類名列表