Vue Bottom Sheet
A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 2 & Vue 3
Installation
NPM
npm install @webzlodimir/vue-bottom-sheet
Yarn
yarn add @webzlodimir/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 setup>
import { VueBottomSheet } from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";
const myBottomSheet = ref(null)
const open = () => {
myBottomSheet.value.open();
}
const close = () => {
myBottomSheet.value.close();
}
</script>
Props
Prop | Type | Description | Example |
---|---|---|---|
overlay | Boolean | Remove back overlay | :overlay="false" |
click-to-close | Boolean | Click outside card to close | :click-to-close="false" |
max-width | String | Set max-width of component card | max-width="640px" |
max-height | String | Set max-height of component card | max-height="90%" |
effect | String | Set effect for component card | effect="fx-fadein-scale" |
rounded | Boolean | Round the top two corners of the sheet | :rounded="false" |
full-screen | Boolean | Enable or disable full-screen mode | :full-screen="true" |
swipeable | Boolean | Enable or disable swipe to close | :swipeable="false" |
overlay-color | String | Set overlay color with opacity | :overlay-color="#0000004D" |
background-scrollable | Boolean | Enable scroll | :background-scrollable="true" |
background-clickable | Boolean | Enable background click, doesn't work if click-to-close=true |
:background-clickable="true" |
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