diff --git a/README.md b/README.md
index 38f46b0..6728864 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,13 @@ new Vue({
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
diff --git a/package.json b/package.json
index df498a7..1ffa861 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-ladda",
- "version": "0.0.13",
+ "version": "0.0.14",
"description": "A vue component wrapper of Ladda button.",
"homepage": "https://github.com/zcfan/vue-ladda",
"main": "dist/vue-ladda.js",
diff --git a/src/vue-ladda.vue b/src/vue-ladda.vue
index 3f84476..9f623e3 100644
--- a/src/vue-ladda.vue
+++ b/src/vue-ladda.vue
@@ -1,6 +1,6 @@
-
@@ -11,8 +11,13 @@
name: 'VueLadda',
props: {
+ // customizable button's class attribute - you can use your own CSS class
+ 'buttonClass': {
+ type: String,
+ default: 'ladda-class'
+ },
// use vue props validation to make sure "data-style" is given. (ladda need it)
- "dataStyle": {
+ 'dataStyle': {
type: String,
default: 'expand-left'
},
@@ -56,8 +61,3 @@
}
};
-
-
diff --git a/test.js b/test.js
index e07a2a8..52d1414 100644
--- a/test.js
+++ b/test.js
@@ -13,7 +13,14 @@ describe('VueLadda', () => {
it('sets the correct default data', () => {
const vm = new Ctor().$mount();
+ expect(vm.buttonClass).toBe('ladda-class');
expect(vm.dataStyle).toBe('expand-left');
expect(vm.progress).toBe(0);
});
+
+ it('test custom button class', () => {
+ let bsClasses = 'btn btn-primary'
+ const vm = new Ctor({propsData: {buttonClass: bsClasses}}).$mount();
+ expect(vm.buttonClass).toBe(bsClasses)
+ });
});