Skip to content
master
Switch branches/tags
Code
This branch is up to date with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

vue-bootstrap-modal

Bootstrap style modal component for vue.

Usage

import Bootstrap.css

<link href="bootstrap.css"></link>

NOTE: By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.

simple options:

<!--text content-->
<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
    Modal Text
</modal>

<!--custom content-->
<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
    <div>Modal Body</div>
    
    <div slot="header">Modal Header</div>
    <div slot="title">Modal Title</div>
    <div slot="footer">Modal Footer</div>
</modal>

#Props

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

About

Bootstrap style modal for vue

Resources

Releases

No releases published

Packages

No packages published

Languages