Animation in Vue Predefined dialogs component
16 Mar 20235 minutes to read
The predefined dialogs can be animated during the open and close actions. Also, user can customize animation’s delay
, duration
and effect
of animation by using the animationSettings property.
In the below sample, Zoom
effect is enabled. So, The Dialog will open with ZoomIn
and close with ZoomOut
effects.
Alert animation
<template>
<div class="predefinedDialogs">
<ejs-button id="alertDlgBtn" v-on:click.native="alertBtnClick" cssClass="e-danger">Alert</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
let dialogObj = undefined;
export default {
data: function () {
return {};
},
methods: {
alertBtnClick: function () {
dialogObj = DialogUtility.alert({
title: 'Low battery',
width: '250px',
animationSettings: { effect: 'Zoom' },
content: '10% of battery remaining'
});
}
},
}
</script>
Confirm animation
<template>
<div class="predefinedDialogs">
<ejs-button id="confirmDlgBtn" v-on:click.native="confirmBtnClick" cssClass = "e-success">Confirm</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
data: function () {
return {};
},
methods: {
confirmBtnClick: function () {
DialogUtility.confirm({
title: 'Delete multiple items',
content: "Are you sure you want to permanently delete these items?",
width: '300px',
animationSettings: { effect: 'Zoom' }
});
}
},
}
</script>
Prompt animation
<template>
<div class="predefinedDialogs">
<ejs-button id="promptDlgBtn" v-on:click.native="promptBtnClick" :isPrimary="true">Prompt</ejs-button>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
.predefinedDialogs {
height: 100%;
min-height: 350px;
}
</style>
<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
data: function () {
return {};
},
methods: {
promptBtnClick: function () {
DialogUtility.confirm({
title: 'Join chat group',
width:'250px',
animationSettings: { effect: 'Zoom' },
content: '<p>Enter your name: </p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />'
});
},
},
}
</script>