menuMDUIDocs
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()現在のスピードダイヤルメニューの開閉状態を返します。合計 4 つの状態（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
セレクト