bootstrap-vue-dialog
v0.1.0
Published
Dialog helper for bootstrap-vue framework
Downloads
386
Maintainers
Readme
bootstrap-vue dialog helper
Implementation of vuedl dialog helper with Vuetify.js framework
This module will help you to work with modal dialogs in your project
NOTE: Module is in initial development. Anything may change at any time.
Documentation
Demo
Setup
Install the package from npm
npm install bootstrap-vue-dialog
import Dialog from 'bootstrap-vue-dialog'
Vue.use(Dialog, {
context,
property
})
context
- the context of your application, such as store, axios, router etc.property
- the property, which will integrate to Vue. Default is$dialog
Simple confirm dialog
const res = await this.$dialog.confirm({ text: 'Do you really want to exit?'})
Warning dialog
const res = await this.$dialog.warning({ text: 'Do you really want to exit?', title: 'Warning'})
Error dialog
this.$dialog.error({ text: 'Cannot delete this item', title: 'Error'})
Propt dialog
let res = await this.$dialog.prompt({ text: 'Your name', title: 'Please input your name' })
Floating notifications
this.$dialog.notify.success('Success notification')
this.$dialog.notify.warning('Warning notification')
this.$dialog.notify.error('Error notification')
this.$dialog.notify.info('Info notification')
this.$dialog.notify.error('No autoclose notification', { timeout : 0 })
this.$dialog.notify.info('Top left notification', { position: 'top-left' })
this.$dialog.notify.info('Bottom right notification', { position: 'bottom-right' }
this.$dialog.notify.info('Bottom left notification', { position: 'bottom-left' })
Actions
To all this simple dialogs you can config your actions, just send
{
...
actions: {
'false': 'No',
'true': 'Yes'
}
}
// result will be true, false, or undefigned
{
...
actions: ['No', 'Yes']
}
// result will be 'No', 'Yes', or undefigned
You can also set options
{
actions: [{
text: 'Yes',
color: 'blue',
key: true,
handle: () => {
// on button click
}
}]
}