Stack
Documentation
The DevExtreme Toast components can stack multiple notifications. Use the notify(message, stack) or notify(options, stack) method to display stacked messages.
These methods use a stack object that has the following structure: {position, direction}.
Specify Position
You can set the position field to a string (select 'predefined' in the radio group) or an object (select 'coordinates' in the radio group). Note that if you use coordinates for the position field, you need to specify one vertical and one horizontal coordinate only. For example, if you specify 'top', the demo disables the 'bottom' field, and vice versa.
Specify Direction
The direction field specifies two options: which way the notification stack grows and whether new notifications appear at the end or at the beginning of the line. For this reason, the field's pull-down menu choices show pairs of values such as 'up-push' and 'up-stack'.
-
'up-push'
New toasts push the previous toasts upwards. -
'up-stack'
Toasts stack on top of each other.
Hide Toasts
To hide all toast messages, use the hideToasts method.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
let id = 1;
let direction = 'up-push';
let position = 'bottom center';
$(() => {
$('#create').dxButton({
text: 'Show',
width: '48%',
onClick() {
DevExpress.ui.notify({
message: `Toast ${id}`,
height: 45,
width: 150,
minWidth: 150,
type: types[Math.floor(Math.random() * 4)],
displayTime: 3500,
animation: {
show: {
type: 'fade', duration: 400, from: 0, to: 1,
},
hide: { type: 'fade', duration: 40, to: 0 },
},
},
{
position,
direction,
});
id += 1;
},
});
$('#hide').dxButton({
text: 'Hide all',
width: '48%',
onClick() {
DevExpress.ui.hideToasts();
},
});
$('#radioGroup').dxRadioGroup({
layout: 'horizontal',
value: 'predefined',
items: ['predefined', 'coordinates'],
onValueChanged: ({ value }) => {
const predefinedSelected = value === 'predefined';
positionSelect.option('visible', predefinedSelected);
topNumberBox.option('visible', !predefinedSelected);
leftNumberBox.option('visible', !predefinedSelected);
bottomNumberBox.option('visible', !predefinedSelected);
rightNumberBox.option('visible', !predefinedSelected);
position = predefinedSelected
? positionSelect.option('value')
: {
top: topNumberBox.option('value') || undefined,
left: leftNumberBox.option('value') || undefined,
bottom: bottomNumberBox.option('value') || undefined,
right: rightNumberBox.option('value') || undefined,
};
},
});
const positionSelect = $('#position').dxSelectBox({
items: positions,
value: position,
onSelectionChanged: ({ selectedItem }) => { position = selectedItem; },
}).dxSelectBox('instance');
$('#direction').dxSelectBox({
items: directions,
value: direction,
onSelectionChanged: ({ selectedItem }) => { direction = selectedItem; },
});
const numberBoxValueChange = (value, pos, componentToDisable) => {
position[pos] = value || undefined;
componentToDisable.option('disabled', !!value);
};
const commonNumberBoxOptions = {
value: '',
width: '48%',
visible: false,
valueChangeEvent: 'keyup',
};
const topNumberBox = $('#positionTop').dxNumberBox({
...commonNumberBoxOptions,
placeholder: 'top',
onValueChanged: ({ value }) => numberBoxValueChange(value, 'top', bottomNumberBox),
}).dxNumberBox('instance');
const bottomNumberBox = $('#positionBottom').dxNumberBox({
...commonNumberBoxOptions,
placeholder: 'bottom',
onValueChanged: ({ value }) => numberBoxValueChange(value, 'bottom', topNumberBox),
}).dxNumberBox('instance');
const leftNumberBox = $('#positionLeft').dxNumberBox({
...commonNumberBoxOptions,
placeholder: 'left',
onValueChanged: ({ value }) => numberBoxValueChange(value, 'left', rightNumberBox),
}).dxNumberBox('instance');
const rightNumberBox = $('#positionRight').dxNumberBox({
...commonNumberBoxOptions,
placeholder: 'right',
onValueChanged: ({ value }) => numberBoxValueChange(value, 'right', leftNumberBox),
}).dxNumberBox('instance');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="options">
<div>Position</div>
<div id="radioGroup"></div>
<div id="position"></div>
<div class="section">
<div id="positionTop"></div>
<div id="positionBottom"></div>
</div>
<div class="section">
<div id="positionLeft"></div>
<div id="positionRight"></div>
</div>
<div>Direction</div>
<div id="direction"></div>
<div class="section">
<div id="create"></div>
<div id="hide"></div>
</div>
</div>
</div>
</body>
</html>
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
width: 260px;
display: flex;
flex-direction: column;
gap: 5px;
}
.section {
width: 100%;
display: flex;
justify-content: space-between;
}
const directions = [
'down-push',
'down-stack',
'up-push',
'up-stack',
'left-push',
'left-stack',
'right-push',
'right-stack',
];
const positions = [
'top left',
'top center',
'top right',
'bottom left',
'bottom center',
'bottom right',
'left center',
'center',
'right center',
];
const types = ['error', 'info', 'success', 'warning'];