菜单

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


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

选项

名称 类型 默认值 描述
方向 字符串 'top' FAB 菜单打开的方向。可以是 'top'、'right'、'buttom'、'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 非常简单！只需设置方向选项即可。


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

仅单击 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 到工具栏

您可以将 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
  });