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.

JS( function( $ ) {
"use strict";
    $( function() {
        setTimeout(() => {  // "setTimeout()" is to wait for "uix-kit.min.js" to be fully loaded
            
            const _data = [{ info: 'Test Notification', theme: 'success' }];
            window.UixToast({
                id: 'test-1',
                cascading: false,
                autoCloseTime: 7000,
                direction: "top-center",
                schemeBody: "align-items-center text-white border-0 p-2",
                closeBtnColor: "#fff",
                data: _data.map((v) => {
                    return {
                        theme: typeof v.theme !== 'undefined' ? `${v.theme}` : 'dark',
                        title: false,
                        note: false,
                        message: `<div><i class="fa-solid fa-circle-info"></i> ${v.info}</div>`
                    };
                }),
                async: true,
                alternateAnimForOne: true
            }, (rootId) => {
                console.log('toast: ', rootId)
            });


            //
            const _data2 = [{ info: 'Test Notification 2' }, { info: 'Test Notification 3' }];
            window.UixToast({
                id: 'test-2',
                cascading: false,
                autoCloseTime: 15000,
                direction: "bottom-center",
                schemeBody: "align-items-center text-white border-0 p-2",
                closeBtnColor: "#fff",
                data: _data2.map((v) => {
                    return {
                        theme: typeof v.theme !== 'undefined' ? `${v.theme}` : 'dark',
                        title: false,
                        note: false,
                        message: `<div><i class="fa-solid fa-circle-info"></i> ${v.info}</div>`
                    };
                }),
                async: true,
                alternateAnimForOne: false
            }, (rootId) => {
                console.log('toast: ', rootId)
            });

            //
            const _data3 = [{ title: "Title 4", info: 'Test Notification 4' }, { title: "Title 5", info: 'Test Notification 5' }, { title: "Title 6", info: 'Test Notification 6' }, { title: "Title 7", info: 'Test Notification 7' }];
            window.UixToast({
                id: 'test-3',
                cascading: true,
                autoCloseTime: 15000,
                direction: "bottom-right",
                schemeHeader: "text-white bg-primary",
                schemeBody: "align-items-center bg-white text-dark border-0 p-2",
                closeBtnColor: "#fff",
                data: _data3.map((v) => {
                    return {
                        theme: typeof v.theme !== 'undefined' ? `${v.theme}` : 'dark',
                        title: v.title,
                        note: false,
                        message: `<div><i class="fa-solid fa-circle-info"></i> ${v.info}</div>`
                    };
                }),
                async: true,
                alternateAnimForOne: false
            }, (rootId) => {
                console.log('toast: ', rootId)
            });



            //
            const _data4 = [{ info: 'Test Notification 8' }, { info: 'Test Notification 9' }];
            window.UixToast({
                id: 'test-4',
                cascading: false,
                autoCloseTime: false,
                direction: "vertical-center",
                schemeBody: "align-items-center text-white border-0 p-2",
                closeBtnColor: "#fff",
                data: _data4.map((v) => {
                    return {
                        theme: typeof v.theme !== 'undefined' ? `${v.theme}` : 'danger',
                        title: false,
                        note: false,
                        message: `<div><i class="fa-solid fa-circle-info"></i> ${v.info}</div>`
                    };
                }),
                async: true,
                alternateAnimForOne: true
            }, (rootId) => {
                console.log('toast: ', rootId)
            });

            //
            const _data5 = [{ info: 'Test Notification 8' }];
            window.UixToast({
                id: 'test-5',
                cascading: false,
                autoCloseTime: 20000,
                direction: "bottom-left",
                schemeBody: "align-items-center text-white border-0 p-2",
                closeBtnColor: "#fff",
                data: _data5.map((v) => {
                    return {
                        theme: typeof v.theme !== 'undefined' ? `${v.theme}` : 'warning',
                        title: false,
                        note: false,
                        message: `<div><i class="fa-solid fa-circle-info"></i> ${v.info}</div>`
                    };
                }),
                async: true,
                alternateAnimForOne: true
            }, (rootId) => {
                console.log('toast: ', rootId)
            });



        }, 0);


    } );
} ) ( jQuery );

---