https://github.com/pygmyslowloris/vue-fab
Vue Floating Action Button
https://github.com/pygmyslowloris/vue-fab
floating-action-button floatingactionbutton vue vuejs2
Last synced: 10 days ago
JSON representation
Vue Floating Action Button
- Host: GitHub
- URL: https://github.com/pygmyslowloris/vue-fab
- Owner: PygmySlowLoris
- License: mit
- Created: 2017-04-24T14:10:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T06:49:16.000Z (over 2 years ago)
- Last Synced: 2025-04-20T17:49:34.277Z (about 1 month ago)
- Topics: floating-action-button, floatingactionbutton, vue, vuejs2
- Language: Vue
- Size: 3.19 MB
- Stars: 274
- Watchers: 8
- Forks: 51
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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.
## 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](https://github.com/PygmySlowLoris/vue-fab/#actions)
| `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](https://material.io/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.
```
import fab from 'vue-fab'
export default {
components: {
fab
},
data(){
return {
bgColor: '#778899',
position: 'top-right',
fabActions: [
{
name: 'cache',
icon: 'cached'
},
{
name: 'alertMe',
icon: 'add_alert'
}
]
}
},
methods:{
cache(){
console.log('Cache Cleared');
},
alert(){
alert('Clicked on alert icon');
}
}
}
```