Vue Floating Action Button
Floating Action Button for Vue.
The component supports multiple action buttons so you can add as many actions as you need. It will fire an event to the parent when clicking on each one.
npm install vue-fab --save
Include the following stylesheets on your document's head
And
| Properties | Type | Values | | :--------------- | :------- | :--------- | |
bg-color| String | Default '#333333'
position| String | Default 'bottom-left'
position-type| String | Default 'fixed'
z-index| String | Default '999'
ripple-show| Boolean | Default true
ripple-color| String | Default 'light'
icon-size| String | Default 'medium'
main-icon| String | Default 'add'
main-tooltip| String | Default
null| |
actions| Array | Details bellow |
fixed-tooltip| Boolean | Default 'false'
enable-rotation| Boolean | Default 'true'
start-opened| Boolean | Default 'false'
toggle-when-away| Boolean | Default 'true'
| Properties | Type | Values | | :--------------- | :------- | :--------- | |
name| String | Name of the event | |
icon| String | Icon name (Please refer to Material icons) | |
tooltip| String | If not used, tooltip won't appear. | |
color| String | Default
bg-colorvalue
Include the component in your .vue file,
actionsprop is required for the component to work. The
@eventhas to match the name given in the
actionsprop. ``` ```
Either
colorand
positionare set by default but they can be changed.
Match your data with your components props. The
bgColoraccepts either HEX, RBG or RGBA format.
Remember: Only material icons are accepted. ``` ```