Vue Toast - Resize and Relocate
To change the size of the Toast, specify the height and width properties.
- <template>
- <div>
- <DxToast
- :visible.sync="isVisible"
- message="Connection problem"
- type="error"
- :height="55"
- :width="300"
- />
- <DxButton
- text="Show the Toast"
- @click="onClick"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxToast } from 'devextreme-vue/toast';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxToast,
- DxButton
- },
- data() {
- return {
- isVisible: false
- };
- },
- methods: {
- onClick() {
- this.isVisible = true;
- }
- }
- }
- </script>
If you need to position the Toast against a specific element on your page, set the position property.
- <template>
- <div>
- <DxToast
- :visible.sync="isVisible"
- message="Connection problem"
- type="error">
- <DxPosition
- my="left"
- at="left"
- of="#targetElement"
- />
- </DxToast>
- <DxButton
- text="Show the Toast"
- @click="onClick"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxToast, DxPosition } from 'devextreme-vue/toast';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxToast,
- DxButton,
- DxPosition
- },
- data() {
- return {
- isVisible: false
- };
- },
- methods: {
- onClick() {
- this.isVisible = true;
- }
- }
- }
- </script>
This configuration of the position property reads as follows: "place my left side at the left side of the "#targetElement".
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.