menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

浮动操作按钮

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

调用方式

  1. 通过自定义属性调用
  2. 通过 JavaScript 调用

样式

浮动操作按钮

给元素添加类 .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() 切换快速拨号菜单的打开状态。
show() 以动画的形式显示整个浮动操作按钮。
hide() 以动画的形式隐藏整个浮动操作按钮。
getState() 返回当前快速拨号菜单的打开状态。共包含四种状态(openingopenedclosingclosed)。

事件

事件 描述 目标 参数
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 带弹出菜单的浮动操作按钮的菜单外层元素。