阅读(3227) (0)

浮动操作按钮

2017-05-24 17:47:47 更新

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

调用方式

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


相关阅读

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


样式

浮动操作按钮

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

www.mdui.org - 浮动操作按钮

在线运行


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

www.mdui.org - 迷你型浮动操作按钮

在线运行


隐藏/显示动画

在浮动操作按钮上添加类 .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);

在线运行


参数

 参数名 类型 默认值 描述
 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 快速拨号菜单完成打开动画时,事件将被触发。 <div class="mdui-fab-wrapper"> event.detail.inst:实例
 close.mdui.fab 快速拨号菜单开始关闭动画时,事件将被触发。 <div class="mdui-fab-wrapper"> event.detail.inst:实例
 closed.mdui.fab 快速拨号菜单完成关闭动画时,事件将被触发。 <div class="mdui-fab-wrapper"> event.detail.inst:实例


CSS 类名列表

 类名 效果
 .mdui-fab 定义浮动操作按钮。
 .mdui-fab-mini 定义迷你型浮动操作按钮。
 .mdui-fab-hide 以动画形式隐藏浮动操作按钮。
 .mdui-fab-fixed 将浮动操作按钮固定到右下角。
 .mdui-fab-wrapper 带弹出菜单的浮动操作按钮的外层元素。
 .mdui-fab-opened 带弹出菜单的浮动操作按钮打开菜单后切换到该图标。
 .mdui-fab-dial 带弹出菜单的浮动操作按钮的菜单外层元素。