vue-ladda
v0.0.15
Published
A vue component wrapper of Ladda button.
Downloads
3,229
Maintainers
Readme
vue-ladda
A vue wrapper for https://github.com/hakimel/Ladda .
Installation
Direct Download / CDN
https://unpkg.com/vue-ladda/dist/vue-ladda.js
<script src="https://unpkg.com/vue-ladda"></script>
Then you can use it in this way:
<vue-ladda ...>...</vue-ladda>
NPM
npm install vue-ladda
import VueLadda from 'vue-ladda'
// or import the vue single file component, if you set vue-loader, sass-loader and babel properly.
import VueLadda from 'vue-ladda/src/vue-ladda.vue'
// then register it globally
Vue.component('vue-ladda', VueLadda)
// or locally
var Child = {
template: '<vue-ladda>Click Me!</vue-ladda>'
}
new Vue({
// ...
components: {
// <my-component> will only be available in parent's template
'vue-ladda': VueLadda
}
})
How to use
Use default slot to give button label: (Default label is "Submit")
<vue-ladda>Confirm</vue-ladda>
Use
buttonClass
prop to specify your own CSS classes: (Default is "ladda-class") ie. you can use Bootstrap button classes<vue-ladda button-class="btn btn-primary">Yes!</vue-ladda>
Use
data-style
prop to specify animation:<vue-ladda data-style="expand-left|contract|zoom-in|slide-left"> ... </vue-ladda>
Visit http://lab.hakim.se/ladda/ to get a full options of data-style.
Use
loading
prop to control button status:<vue-ladda loading="true|false">...</vue-ladda>
Use
progress
prop to control the ladda built-in progress bar. (0 to 1)<vue-ladda :progress="0-1">...</vue-ladda>