https://github.com/yariksav/bootstrap-vue-dialog
Bootstrap vue dialog helper
https://github.com/yariksav/bootstrap-vue-dialog
Last synced: about 2 months ago
JSON representation
Bootstrap vue dialog helper
- Host: GitHub
- URL: https://github.com/yariksav/bootstrap-vue-dialog
- Owner: yariksav
- Created: 2018-09-16T09:52:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:29:42.000Z (over 2 years ago)
- Last Synced: 2025-03-30T13:35:33.594Z (2 months ago)
- Language: Vue
- Size: 1.66 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bootstrap-vue dialog helper
Implementation of [vuedl](https://github.com/yariksav/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.
[![NPM Version][npm-image]][npm-url]
## Documentation
[See docs here](https://github.com/yariksav/vuedl#readme)
## Demo
[Try it](https://o75vq127lq.codesandbox.io/)
## Setup
Install the package from npm
```npm
npm install bootstrap-vue-dialog
```
```javascript
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
```js
const res = await this.$dialog.confirm({ text: 'Do you really want to exit?'})
```
### Warning dialog
```js
const res = await this.$dialog.warning({ text: 'Do you really want to exit?', title: 'Warning'})
```
### Error dialog
```js
this.$dialog.error({ text: 'Cannot delete this item', title: 'Error'})
```
### Propt dialog
```js
let res = await this.$dialog.prompt({ text: 'Your name', title: 'Please input your name' })
```
### Floating notifications
```js
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
```js
{
...
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
```js
{
actions: [{
text: 'Yes',
color: 'blue',
key: true,
handle: () => {
// on button click
}
}]
}
```
[npm-image]: https://img.shields.io/npm/v/bootstrap-vue-dialog.svg?style=flat-square
[npm-url]: https://npmjs.org/package/bootstrap-vue-dialog