@@include('./src/components/_global/include-header.html') @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html')
@@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html')

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.

( 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 );

@@include('./src/components/_global/include-copyright.html')
@@include('./src/components/_global/include-footer.html')