Sheet

Description

Creates a sheet element based on the position provided. maxSize is set to width or height of the sheet depending on the position provided. The transition is calculated based on the position and maxSize of the sheet.

props

• classSheet - sheet class - not the backdrop
• class
• display - controls whether the sheet is displayed
• id
• maxSize - max width/height of sheet based on the side - can also use css instead
• position - determines the position of sheet
• transition - flies the sheet, set to false to remove

slots

name	purpose	default value
default	content	Content

events

name	event
mount	sheet is mounted
destroy	sheet is destroyed

example

<script lang="ts">
    import { Sheet } from "drab";

    let display = false;
</script>

<button
    type="button"
    class="button button-primary"
    on:click={() => (display = true)}
>
    Open
</button>

<Sheet
    bind:display
    class="z-40 backdrop-blur"
    classSheet="card rounded-none border-none"
    position="r"
>
    <div class="mb-4 flex items-center justify-between">
        <h2 class="my-0">Sheet</h2>
        <button
            type="button"
            class="button button-ghost"
            on:click={() => (display = false)}
        >
            Close
        </button>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur.
    </div>
</Sheet>