Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lekoala/bs-companion
The perfect Bootstrap companion
https://github.com/lekoala/bs-companion
bootstrap bootstrap5 form modal responsive table tabs toast validator
Last synced: 13 days ago
JSON representation
The perfect Bootstrap companion
- Host: GitHub
- URL: https://github.com/lekoala/bs-companion
- Owner: lekoala
- License: mit
- Created: 2022-07-08T16:06:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-09T15:39:16.000Z (about 1 year ago)
- Last Synced: 2024-10-13T15:08:21.628Z (28 days ago)
- Topics: bootstrap, bootstrap5, form, modal, responsive, table, tabs, toast, validator
- Language: HTML
- Homepage: https://bs-companion.vercel.app
- Size: 1.16 MB
- Stars: 17
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - lekoala/bs-companion - The perfect Bootstrap companion (HTML)
README
# bs-companion
[](https://nodei.co/npm/bs-companion/)
[](https://www.npmjs.com/package/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
```html
```
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
```js
modalizer({
body: "Hello!",
title: "This is a modal",
icon: btn.dataset.icon,
});
```
For confirm modals, you can use
```js
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
```js
// You can simply pass a string
toaster("Hello world");
// Or an array
toaster({
body: "Hello world some link here",
header: `
autohide: false,
});
```
However, it can be bothersome to always specify all options. Enters the `Toasts` class
```js
Toasts.success("Hello world");
```
## Form validation
You can easily validate all your forms using `FormValidator`
```html
FormValidator.init();
...
```
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`.
```html
```
### Custom validation
You can use custom validation rules. Multiple rules are supported using a , as separator.
```html
```
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](https://github.com/lekoala/bootstrap5-tags): tags input for bootstrap
- [Bootstrap5 autocomplete](https://github.com/lekoala/bootstrap5-autocomplete): the autocomplete input for bootstrap 5 (and more!)
- [Admini](https://github.com/lekoala/admini): the minimalistic bootstrap 5 admin panel
- [Formidable Elements](https://github.com/lekoala/formidable-elements): more custom elements for your bootstrap app!