- Notifications
You must be signed in to change notification settings - Fork48
🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
NotificationsYou must be signed in to change notification settings
vaban-ru/vue-bottom-sheet
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A nice clean and touch-friendly bottom sheet component based onVue.js andhammer.js for Vue 3
npm install @webzlodimir/vue-bottom-sheetyarn add @webzlodimir/vue-bottom-sheet<template> <vue-bottom-sheetref="myBottomSheet"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p> <strong>Lorem Ipsum</strong> is simply dummy text </p> </vue-bottom-sheet></template><script setup>importVueBottomSheetfrom"@webzlodimir/vue-bottom-sheet";import"@webzlodimir/vue-bottom-sheet/dist/style.css";import {ref }from"vue";constmyBottomSheet=ref(null)constopen= ()=> {myBottomSheet.value.open();}constclose= ()=> {myBottomSheet.value.close();}</script>
<template> <vue-bottom-sheetref="myBottomSheet"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p> <strong>Lorem Ipsum</strong> is simply dummy text </p> </vue-bottom-sheet></template><script setup lang="ts">importVueBottomSheetfrom"@webzlodimir/vue-bottom-sheet";import"@webzlodimir/vue-bottom-sheet/dist/style.css";import {ref }from"vue";const myBottomSheet=ref<InstanceType<typeofVueBottomSheet>>()const open= ()=> {myBottomSheet.value.open();}const close= ()=> {myBottomSheet.value.close();}</script>
For Nuxt 3, just wrap component in<client-only>
<template> <client-only> <vue-bottom-sheetref="myBottomSheet"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p> <strong>Lorem Ipsum</strong> is simply dummy text </p> </vue-bottom-sheet> </client-only></template>
| Prop | Type | Description | Example | Defaults |
|---|---|---|---|---|
| max-width | Number | Set max-width of component card in px | :max-width="640" | 640 |
| max-height | Number | Sets the maximum height of the window, if not set it takes the height of the content | :max-height="90" | - |
| can-swipe | Boolean | Enable or disable swipe to close | :can-swipe="false" | true |
| overlay | Boolean | Enable overlay | :overlay="false" | true |
| overlay-color | String | Set overlay color with opacity | overlay-color="#0000004D" | #0000004D |
| overlay-click-close | Boolean | Close window on overlay click | :overlay-click-close="false" | true |
| transition-duration | Number | Transition animation duration | :transition-duration="0.5" | 0.5 |
| Event | Description | Example |
|---|---|---|
| opened | Fire when card component is opened | @opened="" |
| closed | Fire when card component is closed | @closed="" |
| dragging-up | Fire while card component dragging up | @dragging-up="" |
| dragging-down | Fire while card component dragging down | @dragging-down="" |
You can use this named slots:
<template> <vue-bottom-sheetref="myBottomSheet"> <template #header> <h1>Lorem Ipsum</h1> </template> <template #default> <h2>What is Lorem Ipsum?</h2> </template> <template #footer> <p> <strong>Lorem Ipsum</strong> is simply dummy text </p> </template> </vue-bottom-sheet></template>
About
🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors9
Uh oh!
There was an error while loading.Please reload this page.