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:
Changelog:
v2.0.1 (12/08/2021)
- Update for Vue 3
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
Download Details:
Author: vaban-ru
Live Demo: https://vaban-ru.github.io/vue-bottom-sheet-demo/
Download Link: https://github.com/vaban-ru/vue-bottom-sheet
Official Website: https://github.com/vaban-ru/vue-bottom-sheet
Install & Download:
# Yarn
$ yarn add @webzlodimir/vue-bottom-sheet
# NPM
$ npm i @webzlodimir/vue-bottom-sheet