Swipeable Bottom Sheet Component For Vue.js

Description:

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.

// with or without a background overlay
overlay: {
  type: Boolean,
  default: true
},
// max width/height of the bottom sheet
maxWidth: {
  type: String,
  default: "640px"
},
maxHeight: {
  type: String,
  default: "95%"
},
// click outside to close
clickToClose: {
  type: Boolean,
  default: true
},
// fx-default
// fx-fadein-scale
// fx-slide-from-right
// fx-slide-from-left
effect: {
  type: String,
  default: "fx-slide-from-left"
}
// rounded corner
rounded: {
  type: Boolean,
  default: true
}

Preview:

Changelog:

v1.1.8 (02/09/2021)

• Add rounded prop

v1.1.7 (02/08/2021)

• Add closed and opened events

v1.1.4 (02/03/2021)

• Fix dynamic content calculate

01/31/2021

• Add some card effects

01/29/2021

• Fix backdrop clientHeight calculate, add click-to-close prop

Download Details:

Author: webzlodimir

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

Download Link: https://github.com/webzlodimir/vue-bottom-sheet/archive/master.zip

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

Install & Download:

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

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

You Might Be Interested In: