A minimal, clean, draggable, touch-enabled bottom sheet component for Vue 3.
How to use it:
1. Import and register the bottom sheet plugin.
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";
2. Add your own content to the bottom sheet.
<template>
<vue-bottom-sheet ref="myBottomSheet">
<h1>Title</h1>
<h2>Sub Title</h2>
<p>
Content Here
</p>
</vue-bottom-sheet>
</template>
<!-- OR -->
<template>
<vue-bottom-sheet ref="myBottomSheet">
<template #header>
<h1>Title</h1>
</template>
<template #default>
<h2>Sub Title</h2>
</template>
<template #footer>
<p>
Content Here
</p>
</template>
</vue-bottom-sheet>
</template>
3. Available props.
overlay?: boolean overlayColor?: string maxWidth?: number maxHeight?: number transitionDuration?: number overlayClickClose?: boolean canSwipe?: boolean
4. Events.
- @opened
- @closed
- @dragging-up
- @dragging-down
Preview:
Changelog:
v3.0.0 (08/02/2023)
- New version, new code, new logic
v2.0.5 (04/22/2023)
- Added initial frames to animations for unsupported devices.
- Now backdrop element is fixed instead of absolute.
Download Details:
Author: kadiryazici
Live Demo: https://kadiryazici.github.io/bottom-sheet-vue3/
Download Link: https://github.com/kadiryazici/bottom-sheet-vue3/archive/refs/heads/main.zip
Official Website: https://github.com/kadiryazici/bottom-sheet-vue3
Install & Download: