Getting Started with KendoVue Dialog
The KendoVue Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.
The KendoVue Dialog component is part of the KendoVue library of Vue UI components. It is distributed through NPM under the kendo-vue-dialogs package.
Basic Usage
The following example demonstrates the Dialog in action.
<div id="vueapp" class="vue-app">
<div>
<span v-if="!visibleDialog">
<button class="k-button" @click="toggleDialog">Open Dialog</button>
</span>
<kdialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
<p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
<dialog-actions-bar>
<button class="k-button" @click='toggleDialog'>No</button>
<button class="k-button" @click='toggleDialog'>Yes</button>
</dialog-actions-bar>
</kdialog>
</div>
</div>import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
Vue.component('kdialog', Dialog);
Vue.component('dialog-actions-bar', DialogActionsBar);
new Vue({
el: '#vueapp',
data: function () {
return {
visibleDialog: false
};
},
methods: {
toggleDialog() {
this.visibleDialog = !this.visibleDialog;
}
}
});