Vottom Sheet is a touch-friendly, lightweight and easy-to-use Vue.js componentthat allows you to create smooth bottom sheets or modal dialogs in your webapplication.
- Simple integration: Easily integrate the Vottom Sheet component into your Vue.js project with just a few lines of code.
- Smooth animations: Enjoy smooth and elegant animations as the bottom sheet slides into view and hides.
- Flexible: Use Vottom Sheet however you want.
- More to come...
# npm:npm install @amho/vottom-sheet
# or yarn:yarn add @amho/vottom-sheet
# or pnpm:pnpm add @amho/vottom-sheet
<script lang="ts" setup>import {ref }from'vue';import {VottomSheet }from'@amho/vottom-sheet';const model=ref(false);</script><template> <buttontype="button"@click="model = true">Open Vottom Sheet</button> <VottomSheetv-model="model"closeOnOverlayClick> <div>Hello from Vottom Sheet!</div> </VottomSheet></template><style src="@amho/vottom-sheet/style.css" />Just wrap the component inside<ClientOnly> provided by Nuxt.js. This is because vottom-sheet uses browser APIs that are not available on the server.
<template> <ClientOnly> <VottomSheetv-model="model"closeOnOverlayClick> <div>Hello from Vottom Sheet!</div> </VottomSheet> </ClientOnly></template>
Vottom Sheet supports the following props (More props are going to be added):
| Prop | Type | Required | Default Value | Description |
|---|
modelValue | Boolean | ✅ | - | Control the visibility of the bottom sheet. Works in pair with@update:modelValue to enable 2-way data binding (v-model). |
fullscreen | Boolean | ❌ | false | Make the component fullscreen. |
zIndex | String orNumber | ❌ | 0 | Specify thez-index of the bottom sheet. |
closeOnEscape | Boolean | ❌ | false | Whether to close the bottom sheet onEsc key press. |
eager | Boolean | ❌ | false | Force the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. |
closeOnOverlayClick | Boolean | ❌ | false | Whether to close the bottom sheet if the overlay is clicked. |
disableSwipe | Boolean | ❌ | false | Disable the swipe-to-close functionality. |
transitionDuration | Boolean | ❌ | 300 | Specify the transition duration of toggling the bottom sheet. |
| Event | Payload Type | Description |
|---|
update:modelValue | Boolean | Works in pair withmodelValue prop to enable 2-way data binding (v-model). Can be used to listen on state changes and trigger custom code. |
| Slot | Description |
|---|
default | Insert the content that is going to be displayed inside the bottom sheet. |
handle | Insert a custom handle for the bottom sheet which is displayed above thecontent slot and can be used to drag the component. |
