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

浮動動作按鈕

浮動動作按鈕是漂浮在 UI 上的一個圓形圖示，可以具有動態效果，如彈出子選單，顯示和隱藏動畫。

呼叫方式

  1. 透過自訂屬性呼叫
  2. 透過 JavaScript 呼叫

相關閱讀

Material Design 設計規範：元件 - 浮動動作按鈕

樣式

浮動動作按鈕

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

codeplay_arrow
範例
<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

再加入類別 .mdui-fab-mini 可使其變為迷你型浮動動作按鈕。

codeplay_arrow
範例
<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

隱藏/顯示動畫

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

codeplay_arrow
範例
<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

固定到右下角

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

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</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">add</i>

    <!-- 在撥號選單開始開啟時，平滑切換到該圖示，若不需要切換圖示，則可以省略該元素 -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</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">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</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);
執行

參數

參數名稱類型預設值說明
triggerstringhover觸發方式。
  • hover：滑鼠懸停觸發。
  • click：點擊觸發。

方法

方法名稱說明
open()開啟快速撥號選單。
close()關閉快速撥號選單。
toggle()切換快速撥號選單的開啟狀態。
show()以動畫的形式顯示整個浮動動作按鈕。
hide()以動畫的形式隱藏整個浮動動作按鈕。
getState()傳回目前快速撥號選單的開啟狀態。共包含四種狀態（opening、opened、closing、closed）。

事件

事件名稱說明目標參數
open.mdui.fab快速撥號選單開始開啟動畫時，事件將被觸發。<div class="mdui-fab-wrapper"></div>event._detail.inst：實例
opened.mdui.fab快速撥號選單完成開啟動畫時，事件將被觸發。
close.mdui.fab快速撥號選單開始關閉動畫時，事件將被觸發。
closed.mdui.fab快速撥號選單完成關閉動畫時，事件將被觸發。

CSS 類別清單

類別名稱說明
.mdui-fab定義浮動動作按鈕。
.mdui-fab-mini定義迷你型浮動動作按鈕。
.mdui-fab-hide以動畫形式隱藏浮動動作按鈕。
.mdui-fab-fixed將浮動動作按鈕固定到右下角。
.mdui-fab-wrapper帶快速撥號選單的浮動動作按鈕的外層元素。
.mdui-fab-opened帶快速撥號選單的浮動動作按鈕開啟選單後切換到該圖示。
.mdui-fab-dial帶快速撥號選單的浮動動作按鈕的選單外層元素。
arrow_backPrevious
按鈕
arrow_forwardNext
下拉選擇