JavaScript/jQuery Toast - Getting Started
jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Toast is a UI component that displays pop-up notifications.
This tutorial shows how to add the Toast component to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-toast.
Display a Toast notification
NOTE
This tutorial displays a Toast notification in response to a click on a Button. However, you can re-use the code for different application logic.
Use the 'notify' Method
Call the notify method to display a Toast. This method can accept four different sets of arguments.
The basic syntax is notify(message, type, displayTime). You should specify the message, type, and displayTime.
To specify additional Toast properties, call the notify(options, type, displayTime) method and pass an object as the first argument. The example below uses this syntax.
To stack Toasts, call the notify(message, stack) or notify(options, stack) method (depending on the complexity of the notification content). The first method accepts only the message as the first argument, while the second method accepts a Toast configuration object. The second argument in both methods specifies stacking settings.
For more information about stacking Toasts, refer to the following online demo: Toast Stack Demo.
You can specify one of the four predefined types of notifications, depending on the message:
'info'
A blue toast with a message bubble icon.'warning'
A yellow toast with an exclamation mark icon.'error'
A red toast with an X icon.'success'
A green toast with a check mark icon.
If you call the method that allows additional options, you can set the width, height position, and other options. The configuration of the position property in the example below reads as follows: "place my bottom side at the bottom side of the "#container".
jQuery
index.js
index.html
index.css
$(function() {
const types = ['error', 'info', 'success', 'warning'];
$("#show-message").dxButton({
text: "Show message",
onClick: function() {
DevExpress.ui.notify(
{
message: "You have a new message",
width: 230,
position: {
my: "bottom",
at: "bottom",
of: "#container"
}
},
types[Math.floor(Math.random() * 4)],
500
);
},
});
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="buttons">
<div id="show-message"></div>
</div>
</div>
</body>
</html>
#container {
width: 300px;
height: 120px;
margin: 5px;
}
#buttons {
display: flex;
}Angular
app.component.html
app.component.ts
app.module.ts
app.component.css
<div id="container">
<div id="buttons">
<dx-button
text="Show message"
(onClick)="showMessage()"
>
</dx-button>
</div>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
types = ['error', 'info', 'success', 'warning'];
showMessage() {
notify(
{
message: "You have a new message",
width: 230,
position: {
at: "bottom",
my: "bottom",
of: "#container"
}
},
this.types[Math.floor(Math.random() * 4)],
500
);
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxButtonModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxButtonModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
#container {
width: 300px;
height: 120px;
margin: 5px;
}
#buttons {
display: flex;
}Vue
App.vue
<template>
<div id="container">
<div id="buttons">
<dxButton
text="Show message"
@click="showMessage"
>
</dxButton>
</div>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue/button';
import notify from "devextreme/ui/notify";
export default {
components: {
DxButton
}
data() {
return {
types: ['error', 'info', 'success', 'warning']
};
},
methods: {
showMessage() {
notify(
{
message: "You have a new message",
width: 230,
position: {
at: "bottom",
my: "bottom",
of: "#container"
}
},
this.types[Math.floor(Math.random() * 4)],
500
);
}
}
}
</script>
<style>
#container {
width: 300px;
height: 120px;
margin: 5px;
}
#buttons {
display: flex;
}
</style>React
App.js
index.css
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Button } from 'devextreme-react/button';
import notify from 'devextreme/ui/notify';
const types = ['error', 'info', 'success', 'warning'];
const showMessage = () => {
notify(
{
message: "You have a new message",
width: 230,
position: {
at: "bottom",
my: "bottom",
of: "#container"
}
},
types[Math.floor(Math.random() * 4)],
500
);
}
function App() {
return (
<div id="container">
<div id="buttons">
<Button
text="Show message"
onClick={showMessage}
>
</Button>
</div>
</div>
);
}
export default App;
#container {
width: 300px;
height: 120px;
margin: 5px;
}
#buttons {
display: flex;
}Customize Toast Content
To customize toast content, either specify a contentTemplate function or a custom template inside a component. Use .dx-toast-custom CSS class for the template and set the type property to custom.
jQuery
index.js
index.html
index.css
$(function() {
// ...
$("#show-custom-message").dxButton({
text: "Show custom message",
onClick: function() {
DevExpress.ui.notify(
{
width: 230,
height: 50,
position: {
my: "bottom",
at: "bottom",
of: "#container"
},
contentTemplate: (element) => {
element.append('<p>You have a new message</p> ');
element.append('<i class="dx-icon-email icon-style"></i>');
}
},
"custom",
500
);
},
});
});
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="container">
<div id="buttons">
<!-- ... -->
<div id="show-custom-message"></div>
</div>
</div>
</body>
</html>
/* */
.dx-toast-custom {
background-color: #F05B41;
color: white;
border-radius: 5px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-style {
margin-top: 3px;
}Angular
app.component.html
app.component.ts
app.module.ts
app.component.css
<div id="container">
<div id="buttons">
<!-- ... -->
<dx-button
text="Show custom message"
(onClick)="showCustomMessage()"
>
</dx-button>
<dx-toast
[(visible)]="isVisible"
[width]="230"
[height]="50"
type="custom"
>
<dxo-position
my="bottom"
at="bottom"
of="#container">
</dxo-position>
<div *dxTemplate="let data of 'content'">
<div class="flex-box">
<span>You have a new message </span>
<i class="dx-icon-email icon-style"></i>
</div>
</div>
</dx-toast>
</div>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// ...
isVisible: boolean = false;
showCustomMessage() {
this.isVisible = true;
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxButtonModule, DxToastModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxButtonModule,
DxToastModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
/* */
.dx-toast-custom {
background-color: #F05B41;
color: white;
border-radius: 5px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-style {
margin-top: 3px;
}
.flex-box {
width: 230px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}Vue
App.vue
<template>
<div id="container">
<div id="buttons">
<!-- ... -->
<dxButton
text="Show custom message"
@click="showCustomMessage"
>
</dxButton>
</div>
<dxToast
v-model:visible="isVisible"
content-template="custom-template"
:width="230"
:height="50"
type="custom"
>
<DxPosition
my="bottom"
at="bottom"
of="#container"
/>
<template #custom-template>
<span>You have a new message </span>
<i class='dx-icon-email icon-style'></i>
</template>
</dxToast>
</div>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue/button';
import { DxToast, DxPosition } from 'devextreme-vue/toast';
import notify from "devextreme/ui/notify";
export default {
components: {
DxButton,
DxToast,
DxPosition
}
data() {
return {
// ...
isVisible: false
};
},
methods: {
// ...
showCustomMessage() {
this.isVisible = true;
}
}
}
</script>
<style>
/* */
.dx-toast-custom {
background-color: #F05B41;
color: white;
border-radius: 5px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-style {
margin-top: 3px;
}
</style>React
App.js
index.css
import React, { useState } from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Button } from 'devextreme-react/button';
import { Toast, Position } from 'devextreme-react/toast';
import notify from 'devextreme/ui/notify';
function App() {
const [isVisible, setIsVisible] = useState(false);
const showCustomMessage = () => {
setIsVisible(true);
}
const onHiding = () => {
setIsVisible(false);
}
const contentRender = () => {
return (
<div class="flex-box">
<span>You have a new message </span>
<i class='dx-icon-email icon-style'></i>
</div>
);
}
return (
<div id="container">
<div id="buttons">
<!-- ... -->
<Button
text="Show custom message"
onClick={showCustomMessage}
>
</Button>
</div>
<Toast
visible={isVisible}
width={230}
height={50}
type="custom"
contentRender={contentRender}
onHiding={onHiding}
>
<Position
my="bottom"
at="bottom"
of="#container"
/>
</Toast>
</div>
);
}
export default App;
/* */
.dx-toast-custom {
background-color: #F05B41;
color: white;
border-radius: 5px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-box {
display: flex;
align-items: center;
justify-content: center;
}
.icon-style {
margin-top: 3px;
}Feedback