Vue Bottom Sheet
A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js
🎬 Demo
Installation
NPM
npm install --save @phyzerbert/vue-bottom-sheet
Yarn
yarn add @phyzerbert/vue-bottom-sheet
Usage
<template>
<vue-bottom-sheet ref="myBottomSheet">
<h1>Lorem Ipsum</h1>
<h2>What is Lorem Ipsum?</h2>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text
</p>
</vue-bottom-sheet>
</template>
<script>
import VueBottomSheet from "@phyzerbert/vue-bottom-sheet";
export default {
components: {
VueBottomSheet
},
methods: {
open() {
this.$refs.myBottomSheet.open();
},
close() {
this.$refs.myBottomSheet.close();
}
}
}
</script>
Or add to main.js for use throughout the project
import VueBottomSheet from "@phyzerbert/vue-bottom-sheet";
import Vue from "vue";
Vue.use(VueBottomSheet);
Props
Prop | Type | Description | Example |
---|---|---|---|
max-width | String | Set max-width of component card | max-width="640px" |
max-height | String | Set max-height of component card | max-height="90%" |
min-height | Number | Set min-height of component card when closed | :min-height="50" |
effect | String | Set effect for component card | effect="fx-fadein-scale" |
rounded | Boolean | Round the top two corners of the sheet | :rounded="false" |
is-full-screen | Boolean | Enable or disable full-screen mode | :is-full-screen="true" |
swipe-able | Boolean | Enable or disable swipe to close | :swipe-able="false" |
background-scrollable | Boolean | Enable scroll | :background-scrollable="true" |
swipe-limit | Number | Set swipe end limit pixels | :swipe-limit="50" |
Events
Event | Description | Example |
---|---|---|
opened | Fire when card component is opened | @opened="" |
closed | Fire when card component is closed | @closed="" |
List of effects
- fx-default
- fx-fadein-scale
- fx-slide-from-right
- fx-slide-from-left
You can see all the effects on the demo page