Position in Vue Predefined dialogs component

16 Mar 20234 minutes to read

Customize the dialog position by using the position property. The position can be represented with specific X and Y values.

• The PositionDataModel.X can be configured with a left, center, right or offset value. By default, the value is set as center.
• The PositionDataModel.Y can be configured with a top, center, bottom or offset value. By default, the value is set as center.

Alert position

app.vue

<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);
export default {
  data: function () {
    return {};
  },
  methods: {
    alertBtnClick: function () {
      DialogUtility.alert({
        title: "Low battery",
        width: "250px",
        content: "10% of battery remaining",
        position: { X: "center", Y: "center" },
      });
    },
  },
}
</script>

Confirm position

app.vue

<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",
        position: { X: "center", Y: "center" },
      });
    },
  },
}
</script>

Prompt position

app.vue

<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",
        content: '<p>Enter your name: </p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
        position: { X: 'center', Y: 'center' }
      });
    },
  },
}
</script>