Files
lucent-laravel/front/js/svelte/common/OffCanvas.svelte
T
2024-03-26 01:58:05 +02:00

33 lines
882 B
Svelte

<script>
import {onDestroy, onMount} from "svelte";
import offcanvas from "bootstrap/js/src/offcanvas.js";
export let title = "";
let offcanvasEl;
let offcanvasInstance;
export function show() {
offcanvasInstance.show();
}
onMount(()=>{
offcanvasInstance = new offcanvas(offcanvasEl);
});
export function hide(e) {
e.preventDefault();
offcanvasInstance.hide();
}
</script>
<div bind:this={offcanvasEl} class="offcanvas offcanvas-end" tabindex="-1"
aria-labelledby="offcanvasEditContent">
<div class="offcanvas-header">
<h5 class="offcanvas-title">{title}</h5>
<button type="button" on:click={hide} class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" style="overflow: auto">
<slot/>
</div>
</div>