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