Toast - Web Component

...

Browser support

Detected engine:

Chromium
Webkit
Gecko

Parameters

The Web component uses the <z-toast> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
`config` (optional)	`string`	Setting this attribute to a `div` tag will render a toast component. Possible values are: `info`, `alert`, `negative`, `positive`.
`timestamp` (optional)	`string`	The timestamp of the toast. If not, current time is used
`content` (optional)	`string`	The text of the toast

The available slots for the component are:

Name	Tags	Description
`default`	`span`
`timestamp`	`span`

`config`

The config parameter is used to define the toast status. Possible values are: info, alert, negative, positive. Being omitted, the default value is info.

Toast text

`timestamp`

The timestamp parameter is used to define the time to be displayed in the toast. The format must be HH:mm. If not set, the current time will be used.

Toast text

Both background color and text color can be customized using the --z-toast--bg and --z-toast--color CSS custom properties, respectively.

Custom toast

Playground

Customization

HTML Examples

Imports

html

<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/toast.js"></script>

Code

html

<z-toast config="info" timestamp="15:46">Toast text</z-toast>
<z-toast config="alert" timestamp="15:46">Toast text</z-toast>
<z-toast config="positive" timestamp="15:46">Toast text</z-toast>
<z-toast config="negative" timestamp="15:46">Toast text</z-toast>

Toast - Web Component ​

Browser support ​

Parameters ​

config ​

timestamp ​

Playground ​

Customization ​

HTML Examples ​