如果你想要一个固定的浮动操作按钮，你可以添加多个悬停时出现的操作。我们的演示在底部页面的右角。

<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);
  });

  // 或用JQuery

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

选项

名称	类型	默认	描述
direction	String	'top'	描述浮动按钮展开时菜单所在的位置. 可选 'top', 'right', 'buttom', 'left'
hoverEnabled	Boolean	true	如果是true，浮动按钮将通过悬浮展示菜单代替点击展示菜单。
toolbarEnabled	Boolean	false	启用在单击时将浮动按钮传输到工具栏

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.open();

打开浮动按钮

instance.open();
        

.close();

关闭浮动按钮

instance.close();
        

.destroy();

销毁插件实例并回收

instance.destroy();
        

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	浮动按钮当前是否打开

水平浮动按钮

创建水平浮动按钮很容易！只需设置方向选项。

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

仅点击浮动按钮

如果您想禁用悬停行为，而是在用户单击大按钮时切换浮动按钮菜单（在手机上效果很好！），只需添加 click-to-toggle到浮动按钮。

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

工具条上的浮动按钮

您可以在单击时将浮动按钮转换为工具栏，而不是显示单独的按钮选项。只需要添加类 toolbar到浮动按钮上。

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

  // 或用JQuery

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