menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
涟漪动画效果按钮浮动操作按钮下拉选择分隔线可扩展面板文本框选择控件滑块列表列表控制网格列表Tab 选项卡工具栏应用栏抽屉式导航底部导航栏卡片纸片工具提示Snackbar表格对话框菜单进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布，查看 mdui 2 开发文档。

浮动操作按钮

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

调用方式

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

相关阅读

Material Design 设计指南：组件 - 浮动操作按钮

样式

浮动操作按钮

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

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

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

codeplay_arrow
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);
运行

参数

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

方法

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

事件

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