Components with super powers for your Bootstrap apps!
This packages includes:
Simply wrap your regular tabs in a bs-tabs
component
<bs-tabs responsive>
<ul class="nav nav-tabs" id="myTab" role="tablist" style="width: 100%">
<li class="nav-item" role="presentation">...</li>
<li class="nav-item" role="presentation">...</li>
<li class="nav-item" role="presentation">...</li>
</ul>
</bs-tabs>
Supported features (add attributes)
It can also lazy load content in the tabs. It will trigger a lazyload
on any lazy-loadable
element
Basic usage using the modalizer
function
modalizer({
body: "Hello!",
title: "This is a modal",
icon: btn.dataset.icon,
});
For confirm modals, you can use
modalizerConfirm(
{
body: btn.dataset.confirm,
icon: "question",
},
(res) => {
// form elements are exposed as FormData inside detail
let name = res.detail.get("your_name");
console.log("accepted", res);
},
(res) => {
console.log("denied", res);
}
);
Basic usage using the toaster
function
// You can simply pass a string
toaster("Hello world");
// Or an array
toaster({
body: "Hello world <a href='#'>some link here</a>",
header: `<div class="d-flex align-items-center"><l-i name="star" class="me-2"></l-i> My header</div>`,
autohide: false,
});
However, it can be bothersome to always specify all options. Enters the Toasts
class
Toasts.success("Hello world");
You can easily validate all your forms using FormValidator
<script type="module">
FormValidator.init();
</script>
<form action="" class="needs-validation" data-validation-message="Some fields are not valid">...</form>
Simply set a needs-validation
class. You can also set a message that will be shown in case some fields are invalid.
It will also checks in tabs and accordion and show invalid icons.
You can validate on blur
or keydown
.
<input type="email" class="form-control" id="email-input" value="" data-validation-trigger="blur" />
You can use custom validation rules. Multiple rules are supported using a , as separator.
<input type="password" class="form-control" id="confirm-password" data-validation-rules="same #password" data-validation-trigger="blur">
Built-in rules:
You can register custom rules using FormValidation.registerRule
.