Material Design Swipeable Bottom Sheet Component For Vue.js

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

Download Details:

Author: atsutopia

Live Demo: https://github.com/atsutopia/vue-swipeable-bottom-sheet/tree/master/example

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

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

Last Update: November 27, 2019

Install:

# Yarn
$ yarn add vue-swipeable-bottom-sheet

# NPM
$ npm install vue-swipeable-bottom-sheet --save

You Might Be Interested In:

Add Comment