样式
浮动操作按钮
给元素添加类 .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() |
返回当前快速拨号菜单的打开状态。共包含四种状态(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 |
带弹出菜单的浮动操作按钮的菜单外层元素。 |