固定のフローティングアクションボタンの場合は、ホバー時に表示する複数のアクションを追加できます。デモは、ページの右下隅にあります。

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>
      

初期化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.fixed-action-btn').floatingActionButton();
  });
        

オプション

名前	タイプ	既定値	説明
direction	文字列	'top'	FABメニューが開く方向。'top'、'right'、'bottom'、'left' のいずれかを指定できます。
hoverEnabled	ブール値	true	true の場合、FABメニューが開くのはクリックではなくホバー時です。
toolbarEnabled	ブール値	false	クリック時にFABをツールバーに移行させます。

メソッド

jQueryが依存関係ではなくなったので、すべてのメソッドはプラグインインスタンスに対して呼び出されます。プラグインインスタンスは以下の方法で取得できます。

  var instance = M.FloatingActionButton.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.fixed-action-btn').floatingActionButton('methodName');
    $('.fixed-action-btn').floatingActionButton('methodName', paramName);
  */
          

.open();

FABを開きます。

instance.open();
        

.close();

FABを閉じます。

instance.close();
        

.destroy();

プラグインインスタンスを破棄してテイクダウンします。

instance.destroy();
        

プロパティ

名前	タイプ	説明
el	要素	プラグインが初期化されたDOM要素です。
options	オブジェクト	インスタンスが初期化されたときのオプションです。
isOpen	ブール値	FABの開閉状態を示します。

水平FAB

水平FABを作成するのは簡単です。directionオプションを設定するだけです。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left'
    });
  });
        

クリックのみのFAB

ホバー動作を無効にして、ユーザーが大きなボタンをクリックしたときにFABメニューを切り替える場合は、click-to-toggleクラスをFABに追加します（モバイルで効果的です）。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left',
      hoverEnabled: false
    });
  });
        

FABからToolbarへ

個別のボタンオプションを表示するのではなく、クリックするとFABをツールバーに移行できます。toolbarクラスをFABに追加するだけです。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      toolbarEnabled: true
    });
  });

  // Or with jQuery

  $('.fixed-action-btn').floatingActionButton({
    toolbarEnabled: true
  });