Search results

Position in Vue Predefined Dialogs component

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

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);
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

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

Prompt position

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",
    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>