@douxcode/vue-spring-bottom-sheet v2.4.0

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 with v-model

<script setup lang="ts">
import { ref } from 'vue'

import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
import '@douxcode/vue-spring-bottom-sheet/dist/style.css'

const sheet = ref(false)
</script>

<template>
  <button type="button" @click="sheet = true">Open bottom sheet</button>
  <BottomSheet v-model="sheet"> 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-outer-border-color: transparent;
--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

Exposed methods

Assuming there is const bottomSheet = ref()

Events

Acknowledgments

This project was inspired by the following:

• react-spring-bottom-sheet: Accessible ♿️, Delightful ✨, & Fast 🚀
• @webzlodimir/vue-bottom-sheet: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3