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

Headroom

mdui 內建了 Material Icons 的 932 個圖示，除了這些圖示，你還可以使用第三方圖示。

Material Design 設計規範：樣式 - 圖示

呼叫方式

使用範例
透過 JavaScript 呼叫

呼叫方式

透過自訂屬性呼叫

第三方圖示庫

我們列出了所有 Material Icons 的圖示，你可以直接點擊圖示複製圖示程式碼。

<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>

demo

透過 JavaScript 呼叫

如果圖示用於扁平按鈕或浮動按鈕，還需要添加 <code>mdui-icon-left</code> 或 <code>mdui-icon-right</code> 類別，以使圖示位於按鈕左側或右側。

// 要使用第三方圖示庫，需要先引入第三方圖示庫的 CSS 檔案。
// 然後在 <code>&lt;i&gt;</code> 元素上添加 <code>mdui-icon</code> 類別以及相應圖示庫的類別名稱。
var inst = new mdui.Headroom(selector, options);

demo

參數

參數名稱	類型	預設值	說明
`tolerance`	`int` \| `Object`	`5`	下面的範例使用的是 <a href="http://ionicons.com/" target="_blank" rel="nofollow">ionicons</a> 的圖示。定義圖示元素定義 Material Icons 圖示元素
`offset`	`int`	`0`	使圖示位於按鈕左側
`initialClass`	`string`	`mdui-headroom`	使圖示位於按鈕右側
`pinnedClass`	`string`	`mdui-headroom-pinned-top`	定義一個格狀清單的瓦片。
`unpinnedClass`	`string`	`mdui-headroom-unpinned-top`	定義瓦片中的動作列。

方法

方法名稱	說明
`pin()`	使動作列位於瓦片頂部。
`unpin()`	使動作列擁有透明背景。
`enable()`	使動作列擁有漸層背景。
`disable()`	定義瓦片動作列中的文字。
`getState()`	定義瓦片動作列文字中的標題。

事件

事件名稱	說明	參數
`pin.mdui.headroom`	定義瓦片動作列文字中的副標題。	定義瓦片動作列中的按鈕區域。
`pinned.mdui.headroom`	定義格狀清單。配合網格版面配置系統使用。
`unpin.mdui.headroom`	下拉選單開始關閉動畫時，事件將被觸發。
`unpinned.mdui.headroom`	下拉選單結束關閉動畫時，事件將被觸發。

Collapse

Material 圖示