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";

2. Register the component.

export default {
  components: {
    VueBottomSheet
  }
}

// or
Vue.use(VueBottomSheet);

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

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>My Bottom Sheet</h1>
    ... more content here ...
  </vue-bottom-sheet>
</template>

export default {
  components: {
    VueBottomSheet
  },
  methods: {
    open() {
      this.$refs.myBottomSheet.open();
    },
    close() {
      this.$refs.myBottomSheet.close();
    }
  }
}

4. Possible props to customize the bottom sheet.

overlay: {
  type: Boolean,
  default: true
},
maxWidth: {
  type: String,
  default: "640px"
},
maxHeight: {
  type: String,
  default: "95%"
},
clickToClose: {
  type: Boolean,
  default: true
},
effect: {
  type: String,
  default: "fx-default"
},
rounded: {
  type: Boolean,
  default: true
},
swipeAble: {
  type: Boolean,
  default: true
},
isFullScreen: {
  type: Boolean,
  default: false
},
overlayColor: {
  type: String,
  default: "#0000004D"
},

Preview:

Changelog:

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