Files
lucent-laravel/front/js/svelte/common/OffCanvas.svelte
T
2024-03-30 13:42:38 +02:00

33 lines
953 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() {
if(!offCanvasInstance){
offCanvasInstance = new offcanvas(offCanvasEl);
}
offCanvasInstance.show();
}
onMount(()=>{
offCanvasInstance = new offcanvas(offCanvasEl);
});
export function hide() {
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>