a simple fixed-action-button.
npm install --save-dev vue-fixed-action-button
or include build/bundle.js
.
# in your component
components:
"fab": require("vue-fixed-action-button")
# or, when using bundle.js
components:
"fab": window.vueComps.fab
<fab style="bottom:20px;right:20px">
<button slot="fab">hover me</button>
<li key=1><button>Action 1</button></li>
<li key=2><button>Action 2</button></li>
</fab>
see dev/
for examples.
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 |
Name | description |
---|---|
toggled(isOpened:Boolean) | emitted when gets opened or closed. |
You can provide a default js transition like this:
// must be a transition group
// be sure to pass down the context data
Vue.component('fab-transition', {
functional: true
render: function(h,context) {
context.data.attrs.name = "fade"
context.data.props = {css: false}
context.data.on = {
enter: ...
}
return h "transition-group",context.data,context.children)
}
})
-
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
Clone repository.
npm install
npm run dev
Browse to http://localhost:8080/
.
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.