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>
<twm-page>
<twm-navbar title="Sheet Modal" />
<twm-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>
<twm-button @click="() => (sheetOpened = true)">Open Sheet</twm-button>
</p>
</twm-block>
<twm-sheet
class="pb-safe"
:opened="sheetOpened"
@backdropclick="() => (sheetOpened = false)"
>
<twm-toolbar top>
<div class="left" />
<div class="right">
<twm-link toolbar @click="() => (sheetOpened = false)">
Done
</twm-link>
</div>
</twm-toolbar>
<twm-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">
<twm-button @click="() => (sheetOpened = false)">Action</twm-button>
</div>
</twm-block>
</twm-sheet>
</twm-page>
</template>
<script>
import { ref } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmSheet,
twmBlock,
twmButton,
twmToolbar,
twmLink,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmSheet,
twmBlock,
twmButton,
twmToolbar,
twmLink,
},
setup() {
const sheetOpened = ref(false);
return {
sheetOpened,
};
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.