Vue Bottom Sheet

A nice clean and touch-friendly bottom sheet component based on Vue.js and hammer.js for Vue 3

• Vue 2 Version
• :clapper: Demo

Installation

NPM

npm install @webzlodimir/vue-bottom-sheet

Yarn

yarn add @webzlodimir/vue-bottom-sheet

Usage

1<template>
2  <vue-bottom-sheet ref="myBottomSheet">
3    <h1>Lorem Ipsum</h1>
4    <h2>What is Lorem Ipsum?</h2>
5    <p>
6      <strong>Lorem Ipsum</strong> is simply dummy text
7    </p>
8  </vue-bottom-sheet>
9</template>
10
11<script setup>
12import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
13import  "@webzlodimir/vue-bottom-sheet/dist/style.css";
14import { ref } from "vue";
15
16const myBottomSheet = ref(null)
17
18const open = () => {
19  myBottomSheet.value.open();
20}
21
22const close = () => {
23  myBottomSheet.value.close();
24}
25</script>

Usage setup + TS

1<template>
2  <vue-bottom-sheet ref="myBottomSheet">
3    <h1>Lorem Ipsum</h1>
4    <h2>What is Lorem Ipsum?</h2>
5    <p>
6      <strong>Lorem Ipsum</strong> is simply dummy text
7    </p>
8  </vue-bottom-sheet>
9</template>
10
11<script setup lang="ts">
12import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
13import  "@webzlodimir/vue-bottom-sheet/dist/style.css";
14import { ref } from "vue";
15
16const myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>()
17
18const open = () => {
19  myBottomSheet.value.open();
20}
21
22const close = () => {
23  myBottomSheet.value.close();
24}
25</script>

Usage in Nuxt 3

For Nuxt 3, just wrap component in <client-only>

1<template>
2  <client-only>
3    <vue-bottom-sheet ref="myBottomSheet">
4      <h1>Lorem Ipsum</h1>
5      <h2>What is Lorem Ipsum?</h2>
6      <p>
7        <strong>Lorem Ipsum</strong> is simply dummy text
8      </p>
9    </vue-bottom-sheet>
10  </client-only>
11</template>

Props

Prop	Type	Description	Example	Defaults
max-width	Number	Set max-width of component card in px	:max-width="640"	640
max-height	Number	Sets the maximum height of the window, if not set it takes the height of the content	:max-height="90"	-
can-swipe	Boolean	Enable or disable swipe to close	:can-swipe="false"	true
overlay	Boolean	Enable overlay	:overlay="false"	true
overlay-color	String	Set overlay color with opacity	overlay-color="#0000004D"	#0000004D
overlay-click-close	Boolean	Close window on overlay click	:overlay-click-close="false"	true
transition-duration	Number	Transition animation duration	:transition-duration="0.5"	0.5

Events

Event	Description	Example
opened	Fire when card component is opened	@opened=""
closed	Fire when card component is closed	@closed=""
dragging-up	Fire while card component dragging up	@dragging-up=""
dragging-down	Fire while card component dragging down	@dragging-down=""

Slots

You can use this named slots:

1<template>
2  <vue-bottom-sheet ref="myBottomSheet">
3    <template #header>
4      <h1>Lorem Ipsum</h1>
5    </template>
6    <template #default>
7      <h2>What is Lorem Ipsum?</h2>
8    </template>
9    <template #footer>
10      <p>
11        <strong>Lorem Ipsum</strong> is simply dummy text
12      </p>
13    </template>
14  </vue-bottom-sheet>
15</template>