Free Trial Buy
    Your search did not match any results.
    Toast

    Toast

    Documentation

    The Toast is a widget that provides pop-up notifications. It can be displayed in one of the following modes: «info», «warning», «error», «success» and «custom». In this demo, the «success» and «error» modes are used depending on the context.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodeSandBox
    Apply
    Reset
    <template> <div id="toast"> <h1>Product List</h1> <ul> <ProductItem v-for="product in products" :key="product.ID" :product="product" /> </ul> </div> </template> <script> import { products } from './data.js'; import ProductItem from './ProductItem.vue'; export default { components: { ProductItem }, data() { return { products }; } }; </script> <style> #toast { padding: 10px; } #toast ul { text-align: center; list-style-type: none; margin: 20px 0; } #toast ul li { display: inline-block; width: 160px; margin: 10px; } #toast ul li img { width: 100px; } .dx-toast-content { min-width: 300px; max-width: 400px; } </style>
    <template> <li> <img :src="product.ImageSrc"><br> <div id="name">{{ product.Name }}</div> <DxCheckBox :on-value-changed="checkAvailability" text="Available" /> </li> </template> <script> import notify from 'devextreme/ui/notify'; import { DxCheckBox } from 'devextreme-vue/check-box'; export default { components: { DxCheckBox }, props: { product: { type: Object, required: true, default: () => {} } }, methods: { checkAvailability(e) { const type = e.value ? 'success' : 'error'; const text = this.product.Name + (e.value ? ' is available' : ' is not available'); notify(text, type, 600); } } }; </script>
    import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
    <!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
    export const products = [{ 'ID': 4, 'Name': 'SuperLED 50', 'Price': 1600, 'Current_Inventory': 77, 'Backorder': 0, 'Manufacturing': 55, 'Category': 'Televisions', 'ImageSrc': '../../../../images/products/4.png' }, { 'ID': 5, 'Name': 'SuperLED 42', 'Price': 1450, 'Current_Inventory': 445, 'Backorder': 0, 'Manufacturing': 0, 'Category': 'Televisions', 'ImageSrc': '../../../../images/products/5.png' }, { 'ID': 6, 'Name': 'SuperLCD 55', 'Price': 1350, 'Current_Inventory': 345, 'Backorder': 0, 'Manufacturing': 5, 'Category': 'Televisions', 'ImageSrc': '../../../../images/products/6.png' }, { 'ID': 7, 'Name': 'SuperLCD 42', 'Price': 1200, 'Current_Inventory': 210, 'Backorder': 0, 'Manufacturing': 20, 'Category': 'Televisions', 'ImageSrc': '../../../../images/products/7.png' }];
    System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@20.1', 'devextreme-vue': 'npm:devextreme-vue@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true } });