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";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";
2. Add the bottom sheet component to the app template.
<template>
<vue-bottom-sheet ref="myBottomSheet">
<h1>Title</h1>
<h2>Sub Title</h2>
<p>
Content
</p>
</vue-bottom-sheet>
</template>
const myBottomSheet = ref(null)
const open = () => {
myBottomSheet.value.open();
}
const close = () => {
myBottomSheet.value.close();
}
3. Possible props to customize the bottom sheet.
overlay?: boolean overlayColor?: string maxWidth?: number maxHeight?: number transitionDuration?: number overlayClickClose?: boolean canSwipe?: boolean
4. Events.
- @opened
- @closed
- @dragging-up
- @dragging-down
Preview:
Changelog:
v3.0.2 (08/04/2021)
- Fix some scroll issues in main block
v3.0.0 (08/02/2021)
- Code refactor
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