Vue Swipe Sheet

Vue3 bottom swipe sheet

🤝 Demo

👉 Demo here

📦 Installation

yarn

yarn add vue-swipe-sheet

npm

npm i vue-swipe-sheet

🔧 Simple usage

import VueSwipeSheet from "vue-swipe-sheet";
import "vue-swipe-sheet/style.css"

const isOpenSheet = ref(true)

<VueSwipeSheet v-model="isOpenSheet">
    <div>
        <h2>Here should be some content</h2>
    </div>
</VueSwipeSheet>

📋 Props

Property	Type	Default	Description
modelValue	boolean	true	State, whether the sheet is currently open
snapPoints	number[]	[200, 400]	An array of sheet heights at which it will stick
isLockScroll	boolean	true	Lock external scroll
startSnapPoint	number	200	Starting sheet height upon initialization
withBackdrop	boolean	true	Specifies whether to display backdrop
backdropColor	string	rgba(0, 0, 0, 0.3)	Backdrop color
zIndex	number	9999	z-index for the background, for the sheet itself the z-index is z-index + 1, can be useful if you need to have several sheets at the same time, and adjust their sequence
isCloseOnOutsideClick	boolean	false	Whether to close a sheet when clicking outside of it

🔧 Event

Name	Payload	Description
update:modelValue	newState: boolean	Called when the open state of a sheet changes
update:positionY	newPositionY: number	Called whenever there is a change in position relative to Y
pan:start	event: HammerInput	Called when pan starts
pan:move	event: HammerInput	Called by the pan process
pan:end	event: HammerInput	Called when pan ends

🎯 External manipulation

You can access the component via Ref and interact with such variables and values

Name	Type	Description
positionY	Ref < number >	Current offset from top
setPositionY	(newPositionY: number): void	Change offset from top
setSnapPoint	(newSnapPoint: number): void	A function similar to setPositionY but sets the height of the popup

💫 Additional example

<template>
  <div>
    <button @click="() => setStateOpenSwipeSheet(false)">Close swipe sheet</button>
    <button @click="() => setStateOpenSwipeSheet(true)">Open swipe sheet</button>
    <button @click="() => setVueSwipeSheetSnapPoint(700)">Set sheet snap point to 700</button>

    <VueSwipeSheet
        ref="vueSwipeSheetRef"
        v-model="isOpenSheet"
        :start-snap-point="300"
        :snap-points="[100, 300, 600, 810]"
    >
      <div>
        <h2>Here should be some content </h2>
        <p>Cur rumor cadunt? Nunquam perdere pulchritudine.</p>
      </div>
    </VueSwipeSheet>
  </div>
</template>


<script setup lang="ts">
  import {ref} from "vue";
  import VueSwipeSheet from "vue-swipe-sheet";
  import "vue-swipe-sheet/style.css"
  
  const vueSwipeSheetRef = ref<typeof VueSwipeSheet>()
  const isOpenSheet = ref(true)

  const setVueSwipeSheetSnapPoint = (newSnapPoint: number) => {
    vueSwipeSheetRef.value.setSnapPoint(newSnapPoint)
  }
  const setStateOpenSwipeSheet = (newState: boolean) => {
    isOpenSheet.value = newState
  }
</script>