Bootstrap Tabs

Extends an input text field to store multiple values. This library works by duplicating the input element you provide it in order to keep your existing form elements intact. Values are then written back to your original input as a comma separated (customisable) string.

Installation

It is assumed Bootstrap (tested with ^5.3.3) is already installed in your project.

npm i bootstrap-tabs

API

Create an instance:

import { BootstrapTabs } from "bootstrap-tabs";

let tabs = new BootstrapTabs(document.getElementById("input-field"));

Settings

You can also provide a settings object as the second parameter to provide customisation. All settings are optional.

| Setting | Type | Default | Notes | | ------- | ---- | ------- | ----- | | allowDuplicates | boolean | false | Pass in true to allow duplicate entries, default is false | | valueSeparator | string | ',' | Provide a custom value separator when written back to the original input's value attribute | sortItems | boolean | false | Enables or disables the default sort (Calls the built in array sort() function) | | sort | (a: string, b: string) => number; | null | Provide a custom sort callback to order the tabs how you wish. Providing this value overrides the sortItems value. | | beforeAdd | (text: string) => boolean; | null | Provide a callback function which returns a boolean to validate the newly created tab. This can be used to discard tabs before they're created | | disableDelete | boolean | false | Set this to true to hide the delete button within each tab | | tabContentRenderer | (text: string, index: number) => string; | <span>${text}</span> | Provide a function that returns an HTML string containing the contents of the tab to render. | | deleteContentRenderer | (text: string, index: number) => string; | <i class="bi bi-x-circle"></i> | Provide a function that returns an HTML string containing the contents of the delete button within each tab to render. By default this uses the bootstrap-icons library bi-x-circle icon, so this function can be used to override this behaviour | | tabClassList | Array<string> | ["badge", "bg-light", "text-dark"] | The list of additional classes to be added to the tab. You can provide these as a way to fully customise how the tabs look. (Note: If you specify this array, the default classes will not be added) | | deleteBtnClassList | Array<string> | ["btn", "btn-sm", "text-dark"] | The list of additional classes to be added to the delete button. You can provide these as a way to fully customise how the delete button looks. (Note: If you specify this array, the default classes will not be added) |

Exposed methods

You can interact with your bootstrap-tabs instance in the following ways:

// Add a new tab (Note this will still execute the beforeAdd / sort settings parameters if provided):
const successfullyAdded = instance.addTab("<Tab value>");

// Remove a tab:
instance.removeTab("<Tab value>");

// Cleanup the instance by calling:
instance.dispose();

CSS/SCSS

Both compiled CSS and the source SCSS is included in this package. You can from whichever works best for your project.

To import the SCSS into your worflow, you can add the following to your sass file:

@import "bootstrap-tabs/dist/scss/bootstrap-tabs";

If you're using vite you may need to add an alias to your vite.config.js:

export default defineConfig({
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '~bootstrap-tabs': path.resolve(__dirname, 'node_modules/bootstrap-tabs'),
        }
    },
    ...

and then import using the alias:

@import "~bootstrap-tabs/dist/scss/bootstrap-tabs";