Sheet Svelte Component

Sheet Modal is a special overlay type. Such modal allows to create custom picker overlays with custom content.

Sheet Modal Components

There are following components included:

  • Sheet - sheet modal element

Sheet Props

NameTypeDefaultDescription
backdropbooleantrue

Enables Sheet modal backdrop (dark semi transparent layer behind)

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-black'
colors.bgMaterialstring'bg-md-light-surface dark:bg-md-dark-surface'
openedbooleanfalse

Allows to open/close Sheet modal and set its initial state

onBackdropClickfunction(e)

Click handler on backdrop element

Examples

SheetModal.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Sheet,
    Block,
    Button,
    Toolbar,
    Link,
  } from 'konsta/svelte';


  let sheetOpened = false;
</script>


<Page>
  <Navbar title="Sheet Modal" />


  <Block strongIos outlineIos class="space-y-4">
    <p>
      Sheet Modals slide up from the bottom of the screen to reveal more
      content. Such modals allow to create custom overlays with custom content.
    </p>
    <p>
      <Button onClick={() => (sheetOpened = true)}>Open Sheet</Button>
    </p>
  </Block>


  <Sheet
    class="pb-safe"
    opened={sheetOpened}
    onBackdropClick={() => (sheetOpened = false)}
  >
    <Toolbar top>
      <div class="left" />
      <div class="right">
        <Link toolbar onClick={() => (sheetOpened = false)}>Done</Link>
      </div>
    </Toolbar>
    <Block>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum ad
        excepturi nesciunt nobis aliquam. Quibusdam ducimus neque
        necessitatibus, molestias cupiditate velit nihil alias incidunt,
        excepturi voluptatem dolore itaque sapiente dolores!
      </p>
      <div class="mt-4">
        <Button onClick={() => (sheetOpened = false)}>Action</Button>
      </div>
    </Block>
  </Sheet>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.