@amho/vottom-sheet NPM

Vottom Sheet

Vottom Sheet is a touch-friendly, lightweight and easy-to-use Vue.js component that allows you to create smooth bottom sheets or modal dialogs in your web application.

Features

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...

Installation

# npm:
npm install @amho/vottom-sheet

# or yarn:
yarn add @amho/vottom-sheet

# or pnpm:
pnpm add @amho/vottom-sheet

How to use

<script lang="ts" setup>
import { ref } from 'vue';
import { VottomSheet } from '@amho/vottom-sheet';

const model = ref(false);
</script>

<template>
  <button type="button" @click="model = true">Open Vottom Sheet</button>

  <VottomSheet v-model="model" closeOnOverlayClick>
    <div>Hello from Vottom Sheet!</div>
  </VottomSheet>
</template>

<style src="@amho/vottom-sheet/style.css" />

How to use in Nuxt.js

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>
    <VottomSheet v-model="model" closeOnOverlayClick>
      <div>Hello from Vottom Sheet!</div>
    </VottomSheet>
  </ClientOnly>
</template>

Props

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` or `Number`	❌	`0`	Specify the `z-index` of the bottom sheet.
`closeOnEscape`	`Boolean`	❌	`false`	Whether to close the bottom sheet on `Esc` 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.

Events

Event	Payload Type	Description
`update:modelValue`	`Boolean`	Works in pair with `modelValue` prop to enable 2-way data binding (`v-model`). Can be used to listen on state changes and trigger custom code.

Slots

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 the `content` slot and can be used to drag the component.