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>