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 ascenter
. - The
PositionDataModel.Y
can be configured with a top, center, bottom or offset value. By default, the value is set ascenter
.
Alert position
<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
<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
<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>