浮动操作按钮

样式

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

Example

<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 可使其变为迷你型浮动操作按钮。

Example

<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 会以动画的形式隐藏按钮，移除该类后会以动画形式显示按钮。

Example

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

运行

参数

参数名	类型	默认值	描述
`trigger`	`string`	`hover`	触发方式。 `hover`：鼠标悬浮触发。 `click`：点击触发。

方法

方法名	描述
`open()`	打开快速拨号菜单。
`close()`	关闭快速拨号菜单。
`toggle()`	切换快速拨号菜单的打开状态。
`getState()`	返回当前快速拨号菜单的打开状态。共包含四种状态（`opening`、`opened`、`closing`、`closed`）。
`hide()`	以动画的形式隐藏整个浮动操作按钮。
`show()`	以动画的形式显示整个浮动操作按钮。

事件

事件	描述	目标	参数
`open.mdui.fab`	快速拨号菜单开始打开动画时，事件将被触发。	`<div class="mdui-fab-wrapper">`	`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`	带弹出菜单的浮动操作按钮的菜单外层元素。

浮动操作按钮

调用方式

相关阅读

样式

浮动操作按钮

隐藏/显示动画

固定到右下角

弹出菜单

HTML 结构

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件

CSS 类名列表