Toast
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
Use the following JavaScript code to fire it.
const showCustomToast1 = () => {
window.UixToast({
actionId: 'test-1',
title: "Custom Toast 1",
message: `Text here (${Math.random()})`,
autoCloseTime: 1000,
theme: 'warning',
schemeHeader: 'bg-transparent text-light',
onlyShowOne: true
});
};
const showCustomToast2 = () => {
window.UixToast({
actionId: 'test-2',
title: "Custom Toast 2",
message: `Text here (${Math.random()})`,
theme: "dark",
autoCloseTime: 5000,
direction: 'bottom-center',
schemeBody: 'align-items-center text-white border-0 p-2',
closeBtnColor: '#333',
hint: 'There are some warnings that need your attention',
hintAutoShow: false,
onClose: (currentElement, currentToastId) => {
console.log(currentElement, currentToastId);
}
});
};
const showCustomToast3 = () => {
window.UixToast({
actionId: 'test-3',
note: "11 mins ago",
message: `Text here (${Math.random()})`,
autoCloseTime: 5000,
cascading: true,
direction: 'bottom-right',
closeBtnColor: '#333',
reverseDisplay: true
});
};
const showCustomToast4 = () => {
window.UixToast({
actionId: 'test-4',
title: "Note",
message: `Text here (${Math.random()})`,
autoCloseTime: 5000,
direction: 'vertical-center',
theme: 'light',
schemeBody: '',
closeBtnColor: '#333'
});
};
const showCustomToast5 = () => {
window.UixToast({
actionId: 'test-5',
closeDisabled: true,
message: `Text here (${Math.random()})`,
autoCloseTime: 5000,
direction: 'bottom-left',
schemeHeader: 'p-0',
schemeBody: 'align-items-center text-white bg-dark border-0'
});
};
const showCustomToast6 = () => {
window.UixToast({
actionId: 'test-6',
direction: 'top-right',
title: "Custom Toast 1",
message: `Text here (${Math.random()})`,
theme: 'success',
schemeHeader: 'bg-transparent text-light',
autoCloseTime: 3000,
}, () => {
console.log('The presentation is complete');
});
};
HTML:
<button onclick="showCustomToast1()">Custom Toast 1 (Only one is shown)</button>
<button onclick="showCustomToast2()">Custom Toast 2</button>
<button onclick="showCustomToast3()">Custom Toast 3</button>
<button onclick="showCustomToast4()">Custom Toast 4</button>
<button onclick="showCustomToast5()">Custom Toast 5</button>
<button onclick="showCustomToast6()">Custom Toast 6</button>