浮動操作按鈕是漂浮在 UI 上的一個圓形圖標，可以具有動態(tài)效果，如彈出子菜單，顯示、隱藏動畫。

調用方式

• 通過自定義屬性調用
  
• 通過 JavaScript 調用
  

相關閱讀

Material Design 浮動操作按鈕設計規(guī)范

樣式

浮動操作按鈕

給元素添加類 .mdui-fab 即可使其成為浮動操作按鈕。

在線運行

再添加類 .mdui-fab-mini 可使其變?yōu)槊阅阈透硬僮靼粹o。

在線運行

隱藏/顯示動畫

在浮動操作按鈕上添加類 .mdui-fab-hide 會以動畫的形式隱藏按鈕，移除該類后會以動畫形式顯示按鈕。

在線運行

固定到右下角

在浮動操作按鈕上添加類 .mdui-fab-fixed 能使按鈕固定到窗口右下角。

<button class="mdui-fab mdui-fab-fixed mdui-ripple"><i class="mdui-icon material-icons"></i></button>

在線運行

彈出菜單

HTML 結構

該按鈕始終固定在窗口右下角。在鼠標懸浮或點擊時向上彈出快速撥號菜單。

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- 默認顯示的圖標 -->
    <i class="mdui-icon material-icons">&#xe145;</i>
    
    <!-- 在撥號菜單開始打開時，平滑切換到該圖標，若不需要切換圖標，則可以省略該元素 -->
    <i class="mdui-icon mdui-fab-opened material-icons">&#xe254;</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink"><i class="mdui-icon material-icons">&#xe864;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red"><i class="mdui-icon material-icons">&#xe866;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange"><i class="mdui-icon material-icons">&#xe191;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue"><i class="mdui-icon material-icons">&#xe913;</i></button>
  </div>
</div>

通過自定義屬性調用

使用該方式無需編寫 JavaScript 代碼。只需在含 .mdui-fab-wrapper 的元素上添加 mdui-fab="options" 即可激活該插件。

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

通過 JavaScript 調用

實例化組件：

// selector 為 CSS 選擇器或 DOM 元素或 HTML 字符串
// options 為插件的參數，見下面的參數列表
var inst = new mdui.Fab(selector, options);

在線運行

參數

方法

事件

CSS 類名列表