vue spring bottom sheet

šŸ˜Ž Modern and šŸš€ Performant Bottom Sheet for Vue.js

megaarmos
98
4
Vue

Vue Spring Bottom Sheet

vue-spring-bottom-sheet is built on top of motion-v.

šŸ˜Ž Modern and šŸš€ Performant Bottom Sheet for Vue.js

Demo šŸ‘€

Installation

npm install @douxcode/vue-spring-bottom-sheet

bun install @douxcode/vue-spring-bottom-sheet

Getting started

Basic usage

<script setup>
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
import { ref } from 'vue'

const bottomSheet = ref(null)

const open = () => {
  bottomSheet.value.open()
}

const close = () => {
  bottomSheet.value.close()
}
</script>

<template>
  <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
</template>

Basic usage setup + TS

<script setup lang="ts">
import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
import { ref } from 'vue'

const bottomSheet = ref<InstanceType<typeof BottomSheet>>()

/* For vue 3.5+ you can use useTemplateRef() */
const bottomSheet = useTemplateRef('bottomSheet')

const open = () => {
  bottomSheet.value.open()
}

const close = () => {
  bottomSheet.value.close()
}
</script>

<template>
  <BottomSheet ref="bottomSheet"> Your content </BottomSheet>
</template>

Usage in Nuxt 3

For Nuxt 3, just wrap component in <ClientOnly>

<template>
  <ClientOnly>
    <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
  </ClientOnly>
</template>

Slots

<template>
  <BottomSheet ref="bottomSheet">
    <template #header> Header </template>
    <div>Your content</div>
    <template #footer> Footer </template>
  </BottomSheet>
</template>

CSS Custom Properties

--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
--vsbs-background: #fff;
--vsbs-border-radius: 16px;
--vsbs-max-width: 640px;
--vsbs-border-color: rgba(46, 59, 66, 0.125);
--vsbs-padding-x: 16px;
--vsbs-handle-background: rgba(0, 0, 0, 0.28);

Props

Prop Definitions

Prop Type Default Description
duration Number 250 Animation duration in milliseconds
snapPoints Array<number|string> [instinctHeight] Custom snapping positions
initialSnapPoint Number minHeight Initial snap point index
blocking Boolean true Block interactions with underlying content
canSwipeClose Boolean true Enable swipe-to-close gesture
canOverlayClose Boolean true Allow closing by tapping backdrop
expandOnContentDrag Boolean true Enable expanding by dragging content

Exposed methods

Assuming there is const bottomSheet = ref()

Method Description Example
open Opens the bottom sheet bottomSheet.value.open()
close Closes the bottom sheet bottomSheet.value.close()
snapToPoint Snaps to a specific point bottomSheet.value.snapToPoint(300)

Events

Event Description Payload
opened Emitted when sheet finishes opening -
closed Emitted when sheet finishes closing -
dragging-up Emitted when user drags sheet upward -
dragging-down Emitted when user drags sheet downward -
instinctHeight Emitted when content height changes height (number)

Acknowledgments

This project was inspired by the following: