hideToasts()
import toast from "devextreme/ui/toast/hide_toasts"
The code below uses a Button to hide all the Toast components on click.
jQuery
index.html
index.js
<div id="hide"></div>
$("#hide").dxButton({
text: "Hide all Toasts",
onClick() {
DevExpress.ui.hideToasts();
}
});Angular
app.component.html
app.component.ts
<dx-button
text="Hide all Toasts"
(onClick)="onClick($event)"
>
</dx-button>
import { Component } from '@angular/core';
import hideToasts from 'devextreme/ui/toast/hide_toasts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onClick() {
hideToasts();
}
}Vue
App.vue
<template>
<DxButton
text="Hide all Toasts"
@click="onClick"
/>
</template>
<script>
import { DxButton } from 'devextreme-vue/button';
import hideToasts from 'devextreme/ui/toast/hide_toasts';
export default {
methods: {
onClick() {
hideToasts();
}
}
}
</script>React
App.js
import React from 'react';
import { Button } from 'devextreme-react/button';
import hideToasts from 'devextreme/ui/toast/hide_toasts';
function App() {
const onClick = () => {
hideToasts();
}
return (
<Button
text="Hide all Toasts"
onClick={onClick}
/>
);
}
export default App;Feedback