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

<script setup>
import { BottomSheet } from '@nosadev/vue-bottom-sheet'
import { ref } from 'vue'

const showSheet = ref<boolean>(false)

const closeSheet = () => {
  showSheet.value = false
}
const showSheetFn = () => {
  showSheet.value = true
}
</script>

<template>
  <button @click="showSheetFn"> Show Sheet</button>
  <bottom-sheet :showSheet="showSheet" :onClose="closeSheet">
    <div>
      <h1>Hello World</h1>
      <span>Vue 3<span>
    </div>
  </bottom-sheet>
</template>

Usage Options API + TS

<script lang="ts">
import { defineComponent } from 'vue'
import { BottomSheet } from '@nosadev/vue-bottom-sheet'

export default defineComponent({
  components: {
    BottomSheet
  },
  data: () => ({
    showSheet: false
  }),

  methods: {
    hideSheet() {
      this.showSheet = false
    }
  }
})
</script>

<template>
  <main>
    <button @click="showSheet = true">Show sheet</button>
    <BottomSheet :showSheet="showSheet" :onClose="hideSheet" />
  </main>
</template>

Usage in Nuxt 3

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

<template>
  <client-only>
    <button @click="showSheet = true">Show sheet</button>
    <bottom-sheet :showSheet="showSheet" :onClose="hideSheet">
      <h1>Hello World</h1>
      <span>Vue 3<span>
    </bottom-sheet>
  </client-only>
</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:

<template>
  <bottom-sheet>
    <template #header>
      <span> vue3---vue3 </span>
    </template>
    <template>
      <h2>Vue3 Bottom Sheet 🚀</h2>
    </template>
  </bottom-sheet>
</template>