svelte-bootstrapjs-action
v2.2.3
Published
A Svelte action plugin that enables Bootstrap JavaScript functionality on Bootstrap elements.
Downloads
445
Maintainers
Readme
svelte-bootstrapjs-action
A Svelte action plugin that enables Bootstrap JavaScript functionality on Bootstrap 5 elements.
Features
This is a Svelte action to manage Bootstrap JavaScript.
- Easy to use
- Handles creation/disposal of Bootstrap instances to avoid memory leaks
- Access to instances using callbacks for
mount, destroy
lifecycles. - Reactivity
Installation
npm i svelte-bootstrapjs-action
Usage
Before anything else, please afford some time to read more about Bootstrap 5 JavaScript.
This will also help you understand which Bootstrap JS class and configuration to use depending on DOM element(s).
Here is an example using Bootstrap 5 Accordion.
You can also check a demo sample in Svelte REPL!
<script>
import { Collapse } from "bootstrap";
import bootstrapjs from "svelte-bootstrapjs-action";
let bsConfig = {
type: Collapse,
config: {
toggle: false
},
mount: (instance) => /** Do something when element is rendered **/,
destroy: (instance) => /** Do something when element is destroyed **/
};
function toggleAccordionItems(event) {
// Using constructor configuration schema
bsConfig.config = {toggle: true};
bsConfig = bsConfig;
}
</script>
<div class="my-4">
<button on:click={toggleAccordionItems}>
Toggle Collapse State
</button>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div use:bootstrapjs={bsConfig} id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
<div class="accordion-body">
I'm the content.
</div>
</div>
</div>
</div>
API
Parameters
| Name | Type | Description | | ----- | ------ | --------------- | | type | N/A | The Bootstrap 5 JavaScript class to use for creating the instance. | | config | Object | Function | (Optional) The Bootstrap 5 configuration object or callback that is passed as a second parameter to constructor for all instances. | | mount | Function | (Optional) A callback with new bootstrap instance as an argument that is called on element creation. | | destroy | Function | (Optional) A callback with old bootstrap instance as an argument that is called on element destruction. |