Material Design Swipeable Bottom Sheet Component For Vue.js


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: {

3. Create a bottom sheet in your app template.

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

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:

Download Link:

Official Website:

Install & Download:

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

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

You Might Be Interested In:

Add Comment