Sheet Vue 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

componentstring'div'

Component's HTML Element

openedbooleanfalse

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

Sheet Events

NameTypeDescription
backdropclickfunction(e)

Click handler on backdrop element

Examples

SheetModal.vue
<template>
<k-page>
<k-navbar title="Sheet Modal" />
<k-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>
<k-button @click="() => (sheetOpened = true)">Open Sheet</k-button>
</p>
</k-block>
<k-sheet
class="pb-safe"
:opened="sheetOpened"
@backdropclick="() => (sheetOpened = false)"
>
<k-toolbar top>
<div class="left" />
<div class="right">
<k-link toolbar @click="() => (sheetOpened = false)"> Done </k-link>
</div>
</k-toolbar>
<k-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">
<k-button @click="() => (sheetOpened = false)">Action</k-button>
</div>
</k-block>
</k-sheet>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kSheet,
kBlock,
kButton,
kToolbar,
kLink,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kSheet,
kBlock,
kButton,
kToolbar,
kLink,
},
setup() {
const sheetOpened = ref(false);
return {
sheetOpened,
};
},
};
</script>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.