https://github.com/zcfan/vue-ladda
vue wrapper for https://github.com/hakimel/Ladda
https://github.com/zcfan/vue-ladda
Last synced: 27 days ago
JSON representation
vue wrapper for https://github.com/hakimel/Ladda
- Host: GitHub
- URL: https://github.com/zcfan/vue-ladda
- Owner: zcfan
- Created: 2017-05-02T01:59:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T23:28:50.000Z (over 2 years ago)
- Last Synced: 2024-04-14T21:50:38.046Z (about 1 year ago)
- Language: JavaScript
- Size: 664 KB
- Stars: 7
- Watchers: 2
- Forks: 18
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-ladda
A vue wrapper for https://github.com/hakimel/Ladda .
[Demo](http://blog.alanslab.space/vue-ladda/)
[Demo source code](docs/index.html)
## Installation
### Direct Download / CDN
[https://unpkg.com/vue-ladda/dist/vue-ladda.js](https://unpkg.com/vue-ladda/dist/vue-ladda.js)
```html
```
Then you can use it in this way:
```html
...
```
### NPM
```bash
npm install vue-ladda
```
```javascript
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: 'Click Me!'
}
new Vue({
// ...
components: {
// 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")
```html
Confirm
```
- Use `buttonClass` prop to specify your own CSS classes: (Default is "ladda-class")
ie. you can use Bootstrap button classes
```html
Yes!
```
- Use `data-style` prop to specify animation:
```html
...
```
Visit [http://lab.hakim.se/ladda/](http://lab.hakim.se/ladda/) to get a full options of data-style.
- Use `loading` prop to control button status:
```html
...
```
- Use `progress` prop to control the ladda built-in progress bar. (0 to 1)
```html
...
```