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