Search results

Animation in Vue Predefined Dialogs component

02 Feb 2023 / 2 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

Source
Preview
app.vue
Copied to clipboard
<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

Source
Preview
app.vue
Copied to clipboard
<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

Source
Preview
app.vue
Copied to clipboard
<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>