PygmySlowLoris/ vue-fab

(2.3.1) over 2 years ago

Vue.js

JavaScript

HTML

floatingactionbutton

floating-action-button

vuejs2

View on GitHub

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

229 Stars

44 Forks

MIT License

92 Commits

25 Opened issues

Description

Vue Floating Action Button

Services available

Need anything else?

Contributors list

Readme

FAB

Name: vue-fab
Brand: vue-fab
SKU: //PygmySlowLoris/vue-fab
Rating: 2.3225 (229 reviews)

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. ``` ```