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.bgstring'bg-white dark:bg-black'

Sheet bg color

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 strong 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.
2021 © Konsta UI by nolimits4web.