Vue Toast Props

See Also

• Configure a UI Component: Angular | Vue | React | jQuery | AngularJS | Knockout

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

Set this object to null or undefined to disable animation.

The function passed to this property enables you to specify a custom condition for UI component closing. For instance, you can prevent closing until a user clicks a certain element.

$(function () {
    $("#toastContainer").dxToast({
        // ...
        closeOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});

import { DxToastModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    closeOnOutsideClick(e) {
        return e.target === document.getElementById("someElement");
    }
}
@NgModule({
     imports: [
         // ...
         DxToastModule
     ],
     // ...
 })

<dx-toast ...
    [closeOnOutsideClick]="closeOnOutsideClick">
</dx-toast>

<template>
    <DxToast ....
        :close-on-outside-click="closeOnOutsideClick">
    </DxToast>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxToast from 'devextreme-vue/toast';

export default {
    components: {
        DxToast
    },
    methods: {
        closeOnOutsideClick (e) {
            return e.target === document.getElementById("someElement");
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Toast from 'devextreme-react/toast';

const closeOnOutsideClick = (e) => {
    return e.target === document.getElementById("someElement");
};

export default function App() {
    return (
        <Toast ...
            closeOnOutsideClick={closeOnOutsideClick}>
        </Toast>
    );
}

The closeOnOutsideClick function is called when a user clicks the UI component or outside it.

Popup Demo

See Also

• Customize the Content
• Custom Templates

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

The Toast calculates its height relative to one of the elements in the following priority: position.of => window.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

The following example shows how to subscribe to component property changes:

$(function() {
    $("#toastContainer").dxToast({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-toast ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-toast>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxToastModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxToastModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxToast ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxToast from 'devextreme-vue/toast'; 

export default { 
    components: { 
        DxToast
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Toast from 'devextreme-react/toast'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Toast ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

If you set the position.of to a specific element, the shading applies to this element. The Toast calculates its size relative to the element.

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

Shading applies to the first specified element in the following sequence: container => position.of => window

If this property is set to true, the Toast is displayed in modal mode, and users cannot interact with other UI components.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

The available toast types (except for "custom") only differ by the icon and background color.

If you assign "custom" to the type property, the dx-toast-custom class is applied to the UI component element. Implement the appropriate CSS class to specify toast appearance.

You can show and hide the UI component by changing the value of an observable variable passed to this property.

The UI component is automatically hidden after the time specified in the displayTime property.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }

The Toast calculates its width relative to one of the elements in the following priority: position.of => window.