If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.
Copied!
content_copy
<div class="fixed-action-btn">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
Initialization
Copied!
content_copy
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
// specify options here
});
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
// specify options here
});
});
Options
Name | Type | Default | Description |
---|---|---|---|
direction | String | 'top' | Direction FAB menu opens. Can be 'top', 'right', 'bottom', 'left' |
hoverEnabled | Boolean | true | If true, FAB menu will open on hover instead of click |
toolbarEnabled | Boolean | false | Enable transit the FAB into a toolbar on click |
Methods
All the methods are called on the plugin instance. You can get the plugin instance like this:
Copied! content_copyvar instance = M.FloatingActionButton.getInstance(elem);
.open();
Opens FAB.
instance.open();
.close();
Closes FAB.
instance.close();
.destroy();
Destroy plugin instance and teardown
instance.destroy();
Properties
Name | Type | Description |
---|---|---|
el | Element | The DOM element the plugin was initialized with. |
options | Object | The options the instance was initialized with. |
isOpen | Boolean | Describes open/close state of the FAB. |
Horizontal FAB
Creating a horizontal FAB is easy! Just set the direction option.
Copied!
content_copy
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
direction: 'left'
});
});
Click-only FAB
If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button
(works great on mobile!), just add the
click-to-toggle
class to the FAB.
Copied!
content_copy
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
direction: 'left',
hoverEnabled: false
});
});
FAB to Toolbar
Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the
toolbar
class to the FAB.
Copied!
content_copy
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.fixed-action-btn');
var instances = M.FloatingActionButton.init(elems, {
toolbarEnabled: true
});
});