instant-vuetify-overlays
v2.0.5
Published
* Utility for `https://vuetifyjs.com` * programmable snackbar, dialog, progress component
Downloads
53
Maintainers
Readme
instant-vuetify-overlays
Description
- Utility for
https://vuetifyjs.com
- programmable snackbar, dialog, progress component
Instalation
npm install --save instant-vuetify-overlays
import Vue from 'vue';
import Vuetify from 'vuetify';
import InstantVuetifyOverlays from 'instant-vuetify-overlays';
Vue.use(Vuetify);
Vue.use(InstantVuetifyOverlays);
Basic usage in vue class
Snackbar
https://vuetifyjs.com/en/components/snackbars
alert
// basic (timeout: 5000ms)
this.$vsnackbar.alert('Hello');
// with timeout (timeout: 0 is disable auto close)
this.$vsnackbar.alert({ message: 'Hello', timeout: 500 });
// wait to push ok button
await this.$vsnackbar.alert({ message: 'Hello', timeout: 0 });
// manual close
const vsnackbar = this.$vsnackbar.alert({ message: 'Hello', timeout: 0 }).vsnackbar;
vsnackbar.close();
Dialog
https://vuetifyjs.com/en/components/dialogs
open
// open component with card
await this.$vdialog.open({ component: TestDialog, needCard: true });
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class TestDialog extends Vue {
protected onClick() {
this.$emit('ok');
// or this.$emit('cancel');
}
}
alert
// basic
this.$vdialog.alert('Hello');
// title
this.$vdialog.alert({ title: 'Hi', message: 'Hello' });
// wait to push ok button
await this.$vdialog.alert('Hello');
// manual close
const vdialog = this.$vdialog.alert('Hello').vdialog;
vdialog.ok();
confirm
// promise
const result = await this.$vdialog.confirm('Hello');
console.log(result.confirm);
// event handler
this.$vdialog.confirm({
message: 'Hello',
onClose: (result) => {
console.log(result.confirm);
},
});
// manual close
const vdialog = this.$vdialog.confirm('Hello').vdialog;
vdialog.ok(); // or vdialog.cancel();
prompt
// promise
const result = await this.$vdialog.prompt('Hello');
if (result.confirm) {
console.log(result.text);
}
// no cancel
const result = await this.$vdialog.prompt({
message: 'Hello',
persistent: true,
});
console.log(result.text);
// event handler
this.$vdialog.prompt({
message: 'Hello',
onClose: (result) => {
if (result.confirm) {
console.log(result.text);
}
},
});
// timeout prompt
const vdialog = this.$vdialog.prompt('Hello').vdialog;
await wait(3000);
const result = vdialog.ok();
console.log(result.text);
Progress
https://vuetifyjs.com/en/components/progress
Loading
// basic
const vdialog = await this.$vprogress.circular().vdialog;
await wait(1000);
vdialog.ok();
// basic
await this.$vprogress.circularLoading(async () => {
await wait(1000);
});
// min time
await this.$vprogress.circularLoading(async () => {
await wait(500);
}, { minTime: 1000 });
Timer
// basic
await this.$vprogress.circularTimer(1000);
Progress
// basic (setProgress(percent: number) => void)
await this.$vprogress.circularProgress(async (setProgress) => {
await wait(1000);
setProgress(25);
await wait(1000);
setProgress(90);
await wait(1000);
setProgress(100);
});