3.0.5 • Published 9 months ago
@webzlodimir/vue-bottom-sheet v3.0.5
Vue Bottom Sheet
A nice clean and touch-friendly bottom sheet component based on Vue.js and hammer.js for Vue 3
- Vue 2 Version
- :clapper: Demo
Installation
NPM
npm install @webzlodimir/vue-bottom-sheet
Yarn
yarn add @webzlodimir/vue-bottom-sheet
Usage
<template>
<vue-bottom-sheet ref="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>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";
const myBottomSheet = ref(null)
const open = () => {
myBottomSheet.value.open();
}
const close = () => {
myBottomSheet.value.close();
}
</script>
Usage setup
+ TS
<template>
<vue-bottom-sheet ref="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">
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";
const myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>()
const open = () => {
myBottomSheet.value.open();
}
const close = () => {
myBottomSheet.value.close();
}
</script>
Usage in Nuxt 3
For Nuxt 3, just wrap component in <client-only>
<template>
<client-only>
<vue-bottom-sheet ref="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>
Props
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 |
Events
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="" |
Slots
You can use this named slots:
<template>
<vue-bottom-sheet ref="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>
3.0.0-beta1
9 months ago
3.0.0-beta.0
9 months ago
3.0.4
9 months ago
3.0.3
9 months ago
3.0.2
9 months ago
3.0.1
9 months ago
3.0.5
9 months ago
3.0.0
9 months ago
2.0.2
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
1.3.0
2 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago