Code
<!--This is not a live preview!. The example rendered above the Vue 3 version of the code-->
<template>
<div class="wd-example-preview-toast">
<w-toggle label="Basic toggle"></w-toggle>
<w-button label="Show toast" variant="primary"></w-button>
<w-toast target=".wd-example-preview-toast"></w-toast>
</div>
</template>
<script type="module">
import WStack from '@dp-watson-web/web-components/dist/components/WStack/WStack.js';
import WButton from '@dp-watson-web/web-components/dist/components/WButton/WButton.js';
import WToggle from '@dp-watson-web/web-components/dist/components/WToggle/WToggle.js';
import WToast from '@dp-watson-web/web-components/dist/components/WToast/WToast.js';
let toastsData = [];
const toastDefault = document.querySelector('w-toast');
const toggleBasic = document.querySelector('w-toggle');
toggleBasic.modelValue = false;
function addNewToast() {
toastsData = [];
const newToast = {
leadingIcon: 'info',
content: 'Message sent',
variant: 'default',
timeOut: 3000
};
toastsData.push(newToast);
toastDefault.toasts = toastsData;
}
function onUpdate({ detail: [value] }) {
toggleBasic.modelValue = value;
toastDefault.position = value ? 'top' : 'bottom';
}
const defaultTrigger = document.querySelector('w-button');
defaultTrigger.addEventListener('click', addNewToast);
toggleBasic.addEventListener('update:modelValue', onUpdate);
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
position |
Position of the toast |
string |
bottom |
bottom, top |
|
toasts |
Array of objects. The required properties is `content`. |
array |
[] |
[ { leadingIcon: String, content: String, actionId: String, actionLabel: String, variant: String (default, error), timeOut: Number } ] |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
Events
|
Name |
Description |
Type |
|---|---|---|
|
dismiss |
Emits the event after the click or time out |
{ "names": [ "Boolean" ] } |
|
action |
Emits the event after the clicking action button |
{ "names": [ "undefined" ] } |