bs-companion

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!