bs-companion
v1.3.6
Published
The perfect Bootstrap companion
Downloads
57
Maintainers
Readme
bs-companion
Components with super powers for your Bootstrap apps!
This packages includes:
- Responsive Table: Nice responsive tables without ugly scrollbars
- BS Tabs: Improved tabs, that collapse down to a dropdown and with linkable tabs
- Toaster: Generate beautiful toast message without markup
- Toasts: Easily generate basic ui toasts (success, warning, error) and enforce default styling
- Modalizer: Generate beautiful modals without markup
- Form Validator: Consistent validator that works across tabs and accordions
- BS Progress: indeterminate and top page progress bars
Tabs
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)
- Linkable: clicking on the tab will update the hash
- Responsive: when there is not enough space to fit everything on one line, it will collapse to a dropdown
It can also lazy load content in the tabs. It will trigger a lazyload
on any lazy-loadable
element
Modals
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);
}
);
Toasts
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");
Form validation
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.
Validation on trigger
You can validate on blur
or keydown
.
<input type="email" class="form-control" id="email-input" value="" data-validation-trigger="blur" />
Custom validation
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:
- same {fieldSelector}: check if the value is the same
- digits: contains only digits
- number: is a valid number
- alnum: contains only alnum
You can register custom rules using FormValidation.registerRule
.
Also check out
- Bootstrap 5 Tags: tags input for bootstrap
- Bootstrap5 autocomplete: the autocomplete input for bootstrap 5 (and more!)
- Admini: the minimalistic bootstrap 5 admin panel
- Formidable Elements: more custom elements for your bootstrap app!