vue-fixed-action-button
a simple fixed-action-button.
Demo
Install
npm install --save-dev vue-fixed-action-button
or include build/bundle.js
.
Usage
# in your component components: "fab": require"vue-fixed-action-button"# or, when using bundle.js components: "fab": windowvueCompsfab
hover me Action 1 Action 2
see dev/
for examples.
Props
Name | type | default | description |
---|---|---|---|
class | Array or Object | ["fixed-action-btn"] | class of the div |
not-dismissable | Boolean | false | will be not close on click outside of menu (only with click-to-toggle) |
close-on-click | Boolean | false | will be closed on click inside of menu |
click-to-toggle | Boolean | false | opens on click instead of hover |
is-opened | Boolean | false | set to open / close |
transition | String | "fab-transition" | name of a reusable vue transition-group |
transition-name | String | "fab" | name of a css transition |
Events
Name | description |
---|---|
toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way is-opened prop |
Transition
You can provide a default js transition like this:
// must be a transition group// be sure to pass down the context dataVue
Changelog
-
2.0.0
now compatible with vue 2.0.0
changed way of using own transition
every item needs a key now -
1.2.1
cleanup -
1.2.0
added toggled event
set default transition -
1.1.0
moved transition tovue-transitions
properly events are renamed after vue transitions -
1.0.0
moved transition tovue-transitions
changed element fromspan
toa
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.