Need help with vue-fab?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

PygmySlowLoris
248 Stars 46 Forks MIT License 92 Commits 28 Opened issues

Description

Vue Floating Action Button

Services available

!
?

Need anything else?

Contributors list

FAB

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.

Live Demo

Installation

npm install vue-fab --save

Dependencies

Include the following stylesheets on your document's head


And


Properties

| Properties | Type | Values | | :--------------- | :------- | :--------- | |

bg-color
| String | Default '#333333'
Accepts all color formats: HEX, RGB & RGBA | |
position
| String | Default 'bottom-left'
Options: 'bottom-left', 'bottom-right', 'top-left','top-right' | |
position-type
| String | Default 'fixed'
Options: 'fixed' or 'absolute'| |
z-index
| String | Default '999'
Set any value that suits your needs. | |
ripple-show
| Boolean | Default true
Options: true or false. | |
ripple-color
| String | Default 'light'
Options: 'light' or 'dark'. | |
icon-size
| String | Default 'medium'
Options: 'small', 'medium' or 'large'. | |
main-icon
| String | Default 'add'
Use icons from the material icon library. | |
main-tooltip
| String | Default
null
| |
actions
| Array | Details bellow |
fixed-tooltip
| Boolean | Default 'false'
if true, it shows the tooltip beside the actions |
enable-rotation
| Boolean | Default 'true'
if true, the fab will rotate to indicate that it has been opened. Will not rotate if there are no actions specified. |
start-opened
| Boolean | Default 'false'
if true, the fab will start opened. |
toggle-when-away
| Boolean | Default 'true'
if false, the fab will not be closed when clicking outside from the fab component.

actions

| 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-color
value

Accepts all color formats: HEX, RGB & RGBA |

Examples

Include the component in your .vue file,

actions
prop is required for the component to work. The
@event
has to match the name given in the
actions
prop. ``` ```

Either

color
and
position
are set by default but they can be changed.

Match your data with your components props. The

bgColor
accepts either HEX, RBG or RGBA format.

Remember: Only material icons are accepted. ``` ```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.