浮動(dòng)操作按鈕

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

調(diào)用方式

• 通過(guò)自定義屬性調(diào)用
  
• 通過(guò) JavaScript 調(diào)用
  

相關(guān)閱讀

Material Design 浮動(dòng)操作按鈕設(shè)計(jì)規(guī)范

樣式

浮動(dòng)操作按鈕

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

在線運(yùn)行

再添加類 .mdui-fab-mini 可使其變?yōu)槊阅阈透?dòng)操作按鈕。

在線運(yùn)行

隱藏/顯示動(dòng)畫(huà)

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

在線運(yùn)行

固定到右下角

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

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

在線運(yùn)行

彈出菜單

HTML 結(jié)構(gòu)

該按鈕始終固定在窗口右下角。在鼠標(biāo)懸浮或點(diǎn)擊時(shí)向上彈出快速撥號(hào)菜單。

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- 默認(rèn)顯示的圖標(biāo) -->
    <i class="mdui-icon material-icons">&#xe145;</i>
    
    <!-- 在撥號(hào)菜單開(kāi)始打開(kāi)時(shí)，平滑切換到該圖標(biāo)，若不需要切換圖標(biāo)，則可以省略該元素 -->
    <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>

通過(guò)自定義屬性調(diào)用

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

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

通過(guò) JavaScript 調(diào)用

實(shí)例化組件：

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

在線運(yùn)行

參數(shù)

方法

事件

CSS 類名列表