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.

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:

Swipeable Bottom Sheet Component For Vue.js

Changelog:

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

v1.2.1 (05/13/2021)

  • Add content move and refactor

v1.2.0 (03/08/2021)

  • Full rework build system

v1.1.9 (03/04/2021)

  • Some little changes

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:

Add Comment