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 |
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
.
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.
Both background color and text color can be customized using the --z-toast--bg
and --z-toast--color
CSS custom properties, respectively.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@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>