vue-floating-buttons

API

Props

| Option | Type | Required | Description | | --- | --- | --- | --- | | mainStyle | String | No | Additional styling for main component wrapper. | | mainButtonStyle | String | No | Additional styling for main button wrapper. | | optionsStyle | String | No | Additional styling for all option buttons wrappers. | | direction | String | No | Direction where it will pop out options to. | | buttons | Array | Yes | All buttons configurations. | | expanded | Boolean | No | Used to set expanded state from mount. |

Buttons array object

| Option | Type | Description | | --- | --- | --- | | html | String | This is the button content. It be interpreted as HTML. | | radius | Number | Adjust button radius. | | color | String | Background color. | | click | Function | Function to be called on click. Only works on option buttons. | | disabled | Boolean | Disable button. | | disabledColor | String | Background color when is disabled. |

Note: First button will be used as the main button.

Instructions

Props

mainStyle

This is a convenience prop to adjust the main component wrapper div style. A common use could be to change the position from relative (default) to absolute and position at will.

Example: Position component to bottom right corner of screen.

<FloatingButtons main-style="position: absolute; right: 20px; bottom: 20px;" direction="up" :buttons="buttons" />

mainButtonStyle

This is a convenience prop to adjust the main button wrapper div style.

Example: Change main button cursor to progress.

<FloatingButtons main-button-style="cursor: progress;" :buttons="buttons" />

optionsStyle

This is a convenience prop to adjust the option buttons wrapper div style.

Example: Change all option buttons cursor to progress.

<FloatingButtons options-style="cursor: progress;" :buttons="buttons" />

direction

This prop is used to set the direction where it will pop out options to. Adjust it based on the positioning of your component.

Valid values: "down" (default), "up", "left", "right".

Example: Set option buttons to pop from left to right.

<FloatingButtons direction="right" :buttons="buttons" />

buttons

This prop is used to configure all buttons. It is an array that should have a minimum length of 2 (main button and one option).

Example:

[
    {
        html: '<i class="fas fa-bars" />'
    },
    {
        html: '<i class="fas fa-compass" />',
        click: () => alert('hello')
    }
]

expanded

This prop is used set the options expanded from mount.

Example:

<FloatingButtons expanded :buttons="buttons" />

Installation and use

Install using npm:

npm install vue-floating-buttons

Script

import Vue from 'vue'
import FloatingButtons from 'vue-floating-buttons'
Vue.component('FloatingButtons', FloatingButtons)

Template

<FloatingButtons :buttons="buttons" />

LICENSE

MIT