Vue Bottom Sheet

Preview

Fork from @nosadev/vue-bottom-sheet

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

• Live Demo

Installation

NPM

npm install @nosadev/vue-bottom-sheet

Yarn

yarn add @nosadev/vue-bottom-sheet

Usage setup + TS

1<script setup>
2import { BottomSheet } from '@nosadev/vue-bottom-sheet'
3import { ref } from 'vue'
4
5const showSheet = ref<boolean>(false)
6
7const closeSheet = () => {
8  showSheet.value = false
9}
10const showSheetFn = () => {
11  showSheet.value = true
12}
13</script>
14
15<template>
16  <button @click="showSheetFn"> Show Sheet</button>
17  <bottom-sheet :showSheet="showSheet" :onClose="closeSheet">
18    <div>
19      <h1>Hello World</h1>
20      <span>Vue 3<span>
21    </div>
22  </bottom-sheet>
23</template>
24

Usage Options API + TS

1<script lang="ts">
2import { defineComponent } from 'vue'
3import { BottomSheet } from '@nosadev/vue-bottom-sheet'
4
5export default defineComponent({
6  components: {
7    BottomSheet
8  },
9  data: () => ({
10    showSheet: false
11  }),
12
13  methods: {
14    hideSheet() {
15      this.showSheet = false
16    }
17  }
18})
19</script>
20
21<template>
22  <main>
23    <button @click="showSheet = true">Show sheet</button>
24    <BottomSheet :showSheet="showSheet" :onClose="hideSheet" />
25  </main>
26</template>

Usage in Nuxt 3

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

1<template>
2  <client-only>
3    <button @click="showSheet = true">Show sheet</button>
4    <bottom-sheet :showSheet="showSheet" :onClose="hideSheet">
5      <h1>Hello World</h1>
6      <span>Vue 3<span>
7    </bottom-sheet>
8  </client-only>
9</template>

Props

Prop	Type	Description	Example	Defaults
showSheet	Boolean	Set to true or flase to show or hide the bottom sheet	:showSheet="()=> showSheet = true"	false
id	String	Sets custom data-id property to customize styles on all layers of the bottom sheet - overide in global style e.g [data-id='nosa-content'] {background: #f9dde0 !important;}	:id="nosa"	-
maxHeight	Number	Sets the maximum height in percentage of the component card with a maximum value of 100 and a minimum value of 10	:max-width="80"	80
maxWidth	Number	Sets the maximum width of the component card in pixels	:max-height="90"	576
onClose	Function	A Fuction that runs when a supposed close action is triggered (like swapping down or clicking the overlay) close	:onClose="()=> showSheet = false"	()=>{}
useDragEffect	Boolean	Enables drag / swap effet	:useDragEffect="false"	true
useOnlyHeaderForDrag	Boolean	Enables drag / swap effet only when user drags the header of the component card	:useOnlyHeaderForDrag="true"	false
dragSpeed	Number	Sets the Transition animation duartion with a maximum value of 10 and a minimum value of 1	dragSpeed="5"	3
background	String	Sets component card background	:background="#f9dde0"	'white'
overlayBackground	String	Sets overlay background	:overlayBackground="transparent"	'rgba(0, 0, 0, 0.5)'
topRadius	Number	Sets component card top radius value in pixels	:topRadius="0"	'20'
headerPadding	Number	Sets padding for header of component card in pixels	:headerPadding="16"	32
onSwipeDown	Function	A Function that runs after Swipe down of component card is complete	:onSwipeDown="()=> console.log('siwped down')"	()=> {}
closeWithOverlay	Boolean	Allows close of bottom sheet with overlay or not	:closeWithOverlay="false"	true

Events

Event	Description	Example	Returns
dragging	Fire when card component is been dragged	@dragging=""	{event: MouseEvent or TouchEvent, contentHeight: number}
release-drag	Fire when card component is release after drag event	@release-drag=""	{event: MouseEvent or TouchEvent, contentHeight: number}
opened	Fire while card component is opened	@opened=""	true
closed	Fire while card component is closed	@closed=""	true

Slots

You can use this named slots:

1<template>
2  <bottom-sheet>
3    <template #header>
4      <span> vue3---vue3 </span>
5    </template>
6    <template>
7      <h2>Vue3 Bottom Sheet 🚀</h2>
8    </template>
9  </bottom-sheet>
10</template>