Material Design Swipeable Bottom Sheet Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-swipeable-bottom-sheet
# NPM
$ npm install vue-swipeable-bottom-sheet --save

Description:

This is a Vue.js component to create a swipeable bottom panel sliding from the bottom of the screen. Inspired by Material Design Bottom Sheets. Requires the hammer.js library.

How to use it:

1. Install and import the component.

import { SwipeableBottomSheet } from "vue-swipeable-bottom-sheet";

2. Register the component.

export default {
  components: {
    SwipeableBottomSheet
  },
}

3. Create a bottom sheet in your app template.

<template>
  <swipeable-bottom-sheet ref="swipeableBottomSheet">
    Any Content Here
  </swipeable-bottom-sheet>
</template>

4. Default props.

openY: {
  type: Number,
  default: 0.1
},
halfY: {
  type: Number,
  default: 0.8
},
defaultState: {
  type: String,
  default: "close"
}