浮動(dòng)操作按鈕

2018-05-24 18:28 更新

浮動(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)操作按鈕。

www.mdui.org - 浮動(dòng)操作按鈕

在線運(yùn)行


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

www.mdui.org - 迷你型浮動(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ù)

 參數(shù)名 類型 默認(rèn)值 描述
 trigger string hover 觸發(fā)方式。
  • hover:鼠標(biāo)懸浮觸發(fā)。
  • click:點(diǎn)擊觸發(fā)。


方法

 方法名 描述
 open() 打開(kāi)快速撥號(hào)菜單。
 close() 關(guān)閉快速撥號(hào)菜單。
 toggle() 切換快速撥號(hào)菜單的打開(kāi)狀態(tài)。
 getState() 返回當(dāng)前快速撥號(hào)菜單的打開(kāi)狀態(tài)。共包含四種狀態(tài)(opening、opened、closing、closed)。
 hide() 以動(dòng)畫(huà)的形式隱藏整個(gè)浮動(dòng)操作按鈕。
 show() 以動(dòng)畫(huà)的形式顯示整個(gè)浮動(dòng)操作按鈕。


事件

 事件 描述 目標(biāo) 參數(shù)
 open.mdui.fab 快速撥號(hào)菜單開(kāi)始打開(kāi)動(dòng)畫(huà)時(shí),事件將被觸發(fā)。 <div class="mdui-fab-wrapper"> event.detail.inst:實(shí)例
 opened.mdui.fab 快速撥號(hào)菜單完成打開(kāi)動(dòng)畫(huà)時(shí),事件將被觸發(fā)。 <div class="mdui-fab-wrapper"> event.detail.inst:實(shí)例
 close.mdui.fab 快速撥號(hào)菜單開(kāi)始關(guān)閉動(dòng)畫(huà)時(shí),事件將被觸發(fā)。 <div class="mdui-fab-wrapper"> event.detail.inst:實(shí)例
 closed.mdui.fab 快速撥號(hào)菜單完成關(guān)閉動(dòng)畫(huà)時(shí),事件將被觸發(fā)。 <div class="mdui-fab-wrapper"> event.detail.inst:實(shí)例


CSS 類名列表

 類名 效果
 .mdui-fab 定義浮動(dòng)操作按鈕。
 .mdui-fab-mini 定義迷你型浮動(dòng)操作按鈕。
 .mdui-fab-hide 以動(dòng)畫(huà)形式隱藏浮動(dòng)操作按鈕。
 .mdui-fab-fixed 將浮動(dòng)操作按鈕固定到右下角。
 .mdui-fab-wrapper 帶彈出菜單的浮動(dòng)操作按鈕的外層元素。
 .mdui-fab-opened 帶彈出菜單的浮動(dòng)操作按鈕打開(kāi)菜單后切換到該圖標(biāo)。
 .mdui-fab-dial 帶彈出菜單的浮動(dòng)操作按鈕的菜單外層元素。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)