menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Floating operation button

The floating operation button is a round icon floating on the UI, which can have dynamic effects, such as pop-up sub-menus, show and hide animations.

Call method

  1. Called by custom attributes
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Floating Action Buttons

style

Floating operation button

Add a class to the element .mdui-fab You can make it a floating operation button.

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>

Add another class .mdui-fab-mini It can be turned into a mini-type floating operation button.

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>

Hide/show animation

Add a class on the floating action button .mdui-fab-hide The button will be hidden in the form of animation, and the button will be displayed in the form of animation after removing this class.

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>

Fixed to the bottom right corner

Add a class on the floating action button .mdui-fab-fixed The button can be fixed to the lower right corner of the window.

<button class="mdui-fab mdui-fab-fixed mdui-ripple"><i class="mdui-icon material-icons">add</i></button>
run

Popup menu

HTML structure

The button is always fixed at the bottom right corner of the window. The speed dial menu will pop up when the mouse is hovered or clicked.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Icons displayed by default -->
    <i class="mdui-icon material-icons">add</i>

    <!-- When the dialing menu starts to open, smoothly switch to this icon, if you don’t need to switch the icon, you can omit this element -->
    <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>

Called by custom attributes

There is no need to write JavaScript code to use this method. Just include .mdui-fab-wrapper Add on the element mdui-fab="options" You can activate the plug-in.

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

Call via JavaScript

Instantiate components:

// selector is a CSS selector or DOM element or HTML string
// options are the parameters of the plug-in, see the parameter list below
var inst = new mdui.Fab(selector, options);
run

parameter

parameter name Types of Defaults description
trigger string hover Trigger method.
  • hover: Triggered by hovering the mouse.
  • click: Click to trigger.

method

Method name description
open() Open the speed dial menu.
close() Close the speed dial menu.
toggle() Toggles the open state of the speed dial menu.
getState() Return to the open state of the current speed dial menu. Contains a total of four states (opening、opened、closing、closed）。
hide() Hide the entire floating operation button in the form of animation.
show() The entire floating operation button is displayed in the form of animation.

event

event description the goal parameter
open.mdui.fab The event will be triggered when the speed dial menu starts to open the animation. <div class="mdui-fab-wrapper"> event._detail.inst: Examples
opened.mdui.fab The event will be triggered when the speed dial menu finishes opening the animation.
close.mdui.fab The event will be triggered when the speed dial menu starts to close the animation.
closed.mdui.fab The event will be triggered when the speed dial menu finishes closing the animation.

List of CSS class names

Class name effect
.mdui-fab Define floating action buttons.
.mdui-fab-mini Define mini floating operation buttons.
.mdui-fab-hide Hide the floating operation buttons in the form of animation.
.mdui-fab-fixed Fix the floating operation button to the lower right corner.
.mdui-fab-wrapper The outer element of the floating operation button with a pop-up menu.
.mdui-fab-opened The floating operation button with pop-up menu switches to this icon after opening the menu.
.mdui-fab-dial The outer menu element of the floating operation button with the pop-up menu.
arrow_back Previous
Button
arrow_forward Next
Drop-down selection
Set document theme

Theme color

Main color

Accent color