2.0.0 • Published 7 years ago
floating-action v2.0.0
Float action
This custom element will create a floating action button. When hover over the element it will reveal the hidden menu. This is a touch event on touch devices
Demo
Install
Install the component using NPM:
$ npm install floating-action --saveDependencies
Custom element polyfill
https://github.com/WebReflection/document-register-elementclassList polyfill
https://www.npmjs.com/package/classlistUsage
Add Custom Element Script:
<script src="../dist/float-action.js"></script>Start using it!
<cs-floatingaction button=".c-floating__button" container=".c-floating__nav" toggle="c-floating__nav--show" move-element="c-floating--offbottom" to-bottom="10">
<nav class="c-floating__nav">
<a href="" class="c-floating__link">
<span class="glyphicon glyphicon-eye-open"></span> View reminders
</a>
<a href="" class="c-floating__link">
<span class="glyphicon glyphicon-calendar"></span> Create reminder
</a>
</nav>
<a href="" class="c-floating__button">
<i class="material-icons md-36 c-floating__icon">add</i>
</a>
</cs-floatingaction>##Options
| Attribute | Options | Default | Description |
|---|---|---|---|
| button | Css Selector | null | This is required. Its the class on the icon that is allow aways visible. |
| container | Css Selector | null | This is required. Its the container that is hidden containing the links |
| toggle | String | null | This is required. This is the name of the class that needs to be added to display the container |
| move-element | String | null | If required to move the custom element of the bottom of the window. This is the class that will be added or remove when scroll off the bottom on the window |
| to-bottom | String | 0 | How far from the bottom of the window should the 'move-element' class be added or removed |