Toast

import {Toast} from 'cx/widgets';

The Toast widget is used to inform the users about new events and offer quick actions. Toasts are similar to Overlays, with the difference that toast position is controlled by the framework.

Controller Index

<Button onClick={ (e, ins) => createToast(e, ins, {placement: 'left'})}>Left Toast</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {placement: 'right'})}>Right Toast</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {placement: 'top'})}>Top Toast</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {placement: 'bottom'})}>Bottom Toast</Button>

<Button onClick={ (e, {store}) => store.toggle('$page.toast.visible')}>Toggle Toast</Button>
<Button onClick={ (e, {store}) => store.toggle('$page.complex.visible')}>Complex Toast</Button>

<Button onClick={ (e, ins) => createToast(e, ins, {mod: 'primary'})}>Primary Mod</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {mod: 'warning'})}>Warning Mod</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {mod: 'error'})}>Error Mod</Button>
<Button onClick={ (e, ins) => createToast(e, ins, {mod: 'success'})}>Success Mod</Button>

<Toast visible-bind="$page.toast.visible" preserveWhitespace>
    This toast is visible only on this page.
    <Button icon="close" dismiss mod="hollow" tooltip="Close"/>
</Toast>

<Toast visible-bind="$page.complex.visible" preserveWhitespace>
    <div preserveWhitespace>
        <TextField value-bind="$page.name" label="Quick Reply:" />
        <Button icon="envelope-o" dismiss disabled-expr="{$page.name} == null">Send</Button>
        <Button icon="close" dismiss />
    </div>
</Toast>

Copied!Cx Fiddle

Configuration

Property	Description	Type
closeOnEscape	Set to `true` to make the window automatically close if the Esc key is pressed on the keyboard. Default value is `false`.	boolean
placement	Defines where the toast will be placed. Supported values are `top`, `right`, `bottom` and `left` and corner values `top-left`, `top-right`, `bottom-left`, `bottom-right`. Default value is `top`.	string
timeout	Value of timeout in milliseconds after which the toast is automatically dismissed.	number
autoFocus	Set to `true` to automatically focus the dropdown when it's shown.	boolean
autoFocusFirstChild	Set to `true` to automatically find and focus the first chinld in the dropdown when it's shown.	boolean
baseClass	Base CSS class. Default is `toast`.	string
centerX	Set to `true` to initially place the overlay in the center of the page horizontally.	boolean
centerY	Set to `true` to initially place the overlay in the center of the page vertically.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
containerStyle	Style to be applied to the overlay's container element.	string
destroyDelay	Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the `animate` property.	number
dismissOnFocusOut	Set to `true` to dismiss the overlay when it loses focus.	boolean
dismissOnPopState	Set to `true` to dismiss the window if the user presses the back button in the browser.	boolean
focusable	Set to true to make the top level overlay element focusable.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
onMove	A callback function which fires while the overlay is being moved around.	function
onResize	A callback function which fires while the overlay is being resized.	function
pad	Add default padding. Default is `true`.	boolean
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
resizeWidth	resizeWidth	number
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean
zIndex	zIndex	number

Documentation

Toast