Swipeable Bottom Sheet Component For Vue.js

A nice clean and touch-friendly bottom sheet component based on Vue.js and hammer.js.

How to use it:

1. Import the Bottom Sheet Component.

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";

2. Add the bottom sheet component to the app template.

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>Title</h1>
    <h2>Sub Title</h2>
    <p>
      Content
    </p>
  </vue-bottom-sheet>
</template>
const myBottomSheet = ref(null)
const open = () => {
  myBottomSheet.value.open();
}
const close = () => {
  myBottomSheet.value.close();
}

3. Possible props to customize the bottom sheet.

overlay?: boolean
overlayColor?: string
maxWidth?: number
maxHeight?: number
transitionDuration?: number
overlayClickClose?: boolean
canSwipe?: boolean

4. Events.

  • @opened
  • @closed
  • @dragging-up
  • @dragging-down

Preview:

Swipeable Bottom Sheet Component For Vue.js

Changelog:

v3.0.2 (08/04/2021)

  • Fix some scroll issues in main block

v3.0.0 (08/02/2021)

  • Code refactor

v2.0.1 (12/08/2021)

  • Update for Vue 3

v1.3.0 (11/13/2021)

  • Fix version

v1.2.4 (08/08/2021)

  • Add swipeable option, add fullscreen mode and color of overlay

v1.2.3 (07/27/2021)

  • Fix move up event if move type === ‘content’

v1.2.2 (06/01/2021)

  • Fix beforeDestroy hook error

Download Details:

Author: vaban-ru

Live Demo: https://vaban-ru.github.io/vue-bottom-sheet-demo/

Download Link: https://github.com/vaban-ru/vue-bottom-sheet

Official Website: https://github.com/vaban-ru/vue-bottom-sheet

Install & Download:

# Yarn
$ yarn add @webzlodimir/vue-bottom-sheet

# NPM
$ npm i @webzlodimir/vue-bottom-sheet

Add Comment