Skip to content

A sleek, highly responsive, touch-friendly, full-featured Bottom Sheet component for Vue.js

License

Notifications You must be signed in to change notification settings

amirhoseinsalimi/vottom-sheet

Repository files navigation

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.

Lightweight and touch-friendly Bottom Sheet component for Vue.js

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.