uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
359 lines (283 loc) • 13.4 kB
HTML
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Toast - @@{website_title}</title>
@@include('./src/components/_global/include-header.html')
</head>
<body class="page">
@@include('./src/components/_global/include-loader.html')
@@include('./src/components/_global/include-toggle-trigger.html')
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
@@include('./src/components/_global/include-brand.html')
@@include('./src/components/_global/include-menu.html')
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Toast</h3>
<p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.</p>
<p>Use the following JavaScript code to fire it.</p>
<pre class="uix-precode uix-t-l"><label>JS</label><code>( 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 );</code>
</pre>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
</main>
@@include('./src/components/_global/include-copyright.html')
</div>
<!-- .uix-wrapper end -->
<script>
( 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 );
</script>
@@include('./src/components/_global/include-footer.html')