Permalink
Browse files

feat(modal): new props for adding classes to header, body and footer (#…

…1462)

* feat(modal): new props for adding classes to header, body and footer

* Update README.md
  • Loading branch information...
tmorehouse committed Dec 14, 2017
1 parent 9bc454d commit bc67a2d7f3cbf7e115f69fdbe97e6e8b6d4b225a
Showing with 22 additions and 4 deletions.
  1. +4 −1 src/components/modal/README.md
  2. +18 −3 src/components/modal/_modal.js
@@ -172,7 +172,7 @@ methods: {
```
## Prevent Closing
### Prevent Closing
To prevent `<b-modal>` from closing (for example when validation fails). you can call
the `preventDefault()` method of the event object passed to your `ok` (**OK** button),
@@ -407,6 +407,9 @@ export default {
<!-- modal-variant-1.vue -->
```
You can also apply abritrary classes to the modal header, body and footer via the
`header-class`, `body-class` and `footer-class` props, respectively. The props
accept either a string or array of strings.
## Lazy loading
Modal will always render its HTML markup in the document at the location that
@@ -267,6 +267,10 @@ export default {
type: String,
default: null
},
headerClass: {
type: [String, Array],
default: null
},
bodyBgVariant: {
type: String,
default: null
@@ -275,6 +279,10 @@ export default {
type: String,
default: null
},
bodyClass: {
type: [String, Array],
default: null
},
footerBgVariant: {
type: String,
default: null
@@ -287,6 +295,10 @@ export default {
type: String,
default: null
},
footerClass: {
type: [String, Array],
default: null
},
hideHeader: {
type: Boolean,
default: false
@@ -387,7 +399,8 @@ export default {
[`bg-${this.headerBgVariant}`]: Boolean(this.headerBgVariant),
[`text-${this.headerTextVariant}`]: Boolean(this.headerTextVariant),
[`border-${this.headerBorderVariant}`]: Boolean(this.headerBorderVariant)
}
},
this.headerClass
]
},
bodyClasses () {
@@ -396,7 +409,8 @@ export default {
{
[`bg-${this.bodyBgVariant}`]: Boolean(this.bodyBgVariant),
[`text-${this.bodyTextVariant}`]: Boolean(this.bodyTextVariant)
}
},
this.bodyClass
]
},
footerClasses () {
@@ -406,7 +420,8 @@ export default {
[`bg-${this.footerBgVariant}`]: Boolean(this.footerBgVariant),
[`text-${this.footerTextVariant}`]: Boolean(this.footerTextVariant),
[`border-${this.footerBorderVariant}`]: Boolean(this.footerBorderVariant)
}
},
this.footerClass
]
}
},

0 comments on commit bc67a2d

Please sign in to comment.