Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Coffcer/vue-bootstrap-modal
Bootstrap style modal for vue
https://github.com/Coffcer/vue-bootstrap-modal
Last synced: 3 months ago
JSON representation
Bootstrap style modal for vue
- Host: GitHub
- URL: https://github.com/Coffcer/vue-bootstrap-modal
- Owner: Coffcer
- Created: 2016-03-17T09:51:34.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-17T10:33:52.000Z (almost 8 years ago)
- Last Synced: 2024-09-19T13:37:47.240Z (4 months ago)
- Language: Vue
- Size: 1.86 MB
- Stars: 148
- Watchers: 9
- Forks: 47
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-bootstrap-modal ★5
- awesome-vue - vue-bootstrap-modal - bootstrap-modal?style=social) - vue的Bootstrap样式组件 (实用库)
- awesome-github-vue - vue-bootstrap-modal - vue的Bootstrap样式组件 (实用库)
- awesome-github-vue - vue-bootstrap-modal - vue的Bootstrap样式组件 (实用库)
- awesome - vue-bootstrap-modal - vue的Bootstrap样式组件 (实用库)
README
# vue-bootstrap-modal
Bootstrap style modal component for vue.
# Usage
import Bootstrap.css
```
```
**NOTE:** By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
simple options:
``` html
Modal Text
Modal Body
Modal Header
Modal Title
Modal Footer
```
#Props
``` javascript
props: {
show: {
type: Boolean,
twoWay: true,
default: false
},
title: {
type: String,
default: 'Modal'
},
// Bootstrap small style modal
small: {
type: Boolean,
default: false
},
// Bootstrap large style modal
large: {
type: Boolean,
default: false
},
// Bootstrap full style modal
full: {
type: Boolean,
default: false
},
// if it set false, click background will close modal
force: {
type: Boolean,
default: false
},
// vue transition name
transition: {
type: String,
default: 'modal'
},
// [OK button] text
okText: {
type: String,
default: 'OK'
},
// [Cancel button] text
cancelText: {
type: String,
default: 'Cancel'
},
// [OK button] className
okClass: {
type: String,
default: 'btn blue'
},
// [Cancel button] className
cancelClass: {
type: String,
default: 'btn red btn-outline'
},
// automatically close when click [OK button]
closeWhenOK: {
type: Boolean,
default: false
}
}
```
# License
MIT