浮动操作按钮

浮动操作按钮是漂浮在 UI 上的一个圆形图标，可以具有动态效果，如弹出子菜单，显示、隐藏动画。

调用方式

• 通过自定义属性调用
  
• 通过 JavaScript 调用
  

相关阅读

Material Design 浮动操作按钮设计规范

样式

浮动操作按钮

给元素添加类 .mdui-fab 即可使其成为浮动操作按钮。

在线运行

再添加类 .mdui-fab-mini 可使其变为迷你型浮动操作按钮。

在线运行

隐藏/显示动画

在浮动操作按钮上添加类 .mdui-fab-hide 会以动画的形式隐藏按钮，移除该类后会以动画形式显示按钮。

在线运行

固定到右下角

在浮动操作按钮上添加类 .mdui-fab-fixed 能使按钮固定到窗口右下角。

<button class="mdui-fab mdui-fab-fixed mdui-ripple"><i class="mdui-icon material-icons"></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">&#xe145;</i>
    
    <!-- 在拨号菜单开始打开时，平滑切换到该图标，若不需要切换图标，则可以省略该元素 -->
    <i class="mdui-icon mdui-fab-opened material-icons">&#xe254;</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">&#xe864;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red"><i class="mdui-icon material-icons">&#xe866;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange"><i class="mdui-icon material-icons">&#xe191;</i></button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue"><i class="mdui-icon material-icons">&#xe913;</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);

在线运行

参数

方法

事件

CSS 类名列表