The Toast is a notification pop-up that showing on desired position which can provide an information to the user.
<div id="toast"/>
<script>
var toastObj = new Toast();
toastObj.appendTo("#toast");
</script>
Specifies the animation configuration settings for showing and hiding the Toast.
<div id="toast_default"></div>
import { Toast } from "@syncfusion/ej2-notifications";
let toastObj: Toast = new Toast({
animation: {
show: { effect: "FadeIn", duration: 600, easing: "linear" },
hide: { effect: "FadeOut", duration: 600, easing: "linear" }
}
});
toastObj.appendTo("#toast_default");
toastObj.show({
title: "Toast",
content: "Toast sample"
});
Defaults to { show: { effect: ‘FadeIn’, duration: 600, easing: ‘linear’ },hide: { effect: ‘FadeOut’, duration: 600, easing: ‘linear’ }}
Specifies the collection of Toast action buttons
to be rendered with the given
Button model properties and its click action handler.
<div id="toast_default"></div>
import { Toast} from "@syncfusion/ej2-notifications";
let toastObj: Toast = new Toast({
buttons: [{ model: { content:`Click`}
}]
});
toastObj.appendTo("#toast_default");
toastObj.show({ content: "Toast sample"
});
Defaults to [{}]
string
| HTMLElement
| Function
Specifies the content to be displayed on the Toast. Accepts selectors, string values and HTML elements.
Defaults to null
string
Defines single/multiple classes (separated by space) to be used for customization of Toast.
Defaults to null
boolean
Defines whether to allow the cross-scripting site or not.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
number
Specifies the Toast display time duration after interacting with the Toast.
Defaults to 1000
string
| number
Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.
Defaults to ‘auto’
string
Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.
Defaults to null
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
boolean
Specifies the newly created Toast message display order while multiple toast’s are added to page one after another. By default, newly added Toast will be added after old Toast’s.
Defaults to true
Specifies the position of the Toast message to be displayed within target container. In the case of multiple Toast display, new Toast position will not update on dynamic change of property values until the old Toast messages removed. X values are: Left , Right ,Center Y values are: Top , Bottom
<div id="toast_default"></div>
import { Toast} from "@syncfusion/ej2-notifications";
let toastObj: Toast = new Toast({
position: { X: 'Right', Y: 'Top' },
content: "Toast sample"
});
toastObj.appendTo("#toast_default");
toastObj.show({});
Defaults to { X: “Left”, Y: “Top” }
Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.
boolean
Specifies whether to show the close button in Toast message to close the Toast.
Defaults to false
boolean
Specifies whether to show the progress bar to denote the Toast message display timeout.
Defaults to false
HTMLElement
| Element
| string
Specifies the target container where the Toast to be displayed.
Based on the target, the positions such as Left
, Top
will be applied to the Toast.
The default value is null, which refers the document.body
element.
Defaults to null
string
| Function
Specifies the HTML element/element ID as a string that can be displayed as a Toast. The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.
<div id="toast_default"></div>
<script id="template_toast_ele" type="text/x-template"> <div>toast template</div></script>
import { Toast} from "@syncfusion/ej2-notifications";
let toastObj: Toast = new Toast({
template: document.getElementById('template_toast_ele').innerHTML
});
toastObj.appendTo("#toast_default");
toastObj.show({});
Defaults to null
number
Specifies the Toast display time duration on the page in milliseconds.
Defaults to 5000
string
| Function
Specifies the title to be displayed on the Toast. Accepts selectors, string values and HTML elements.
Defaults to null
string
| number
Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels.
In mobile devices, default width is considered as 100%
.
Defaults to ‘300’
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
To Hide Toast element on a document. To Hide all toast element when passing ‘All’.
Parameter | Type | Description |
---|---|---|
element (optional) | HTMLElement | Element | string |
To Hide Toast element on screen. |
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
To show Toast element on a document with the relative position.
Parameter | Type | Description |
---|---|---|
toastObj (optional) | ToastModel |
To show Toast element on screen. |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<ToastBeforeCloseArgs>
Triggers the event before the toast close.
Triggers the event before the toast shown.
EmitType<BeforeSanitizeHtmlArgs>
Event triggers before sanitize the value.
The event will be fired while clicking on the Toast.
Trigger the event after the Toast hides.
EmitType<Event>
Triggers the event after the Toast gets created.
EmitType<Event>
Triggers the event after the Toast gets destroyed.
Triggers the event after the Toast shown on the target container.