https://github.com/vaban-ru/vue-bottom-sheet
🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
https://github.com/vaban-ru/vue-bottom-sheet
bottom-sheet component vue vuejs
Last synced: 8 months ago
JSON representation
🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
- Host: GitHub
- URL: https://github.com/vaban-ru/vue-bottom-sheet
- Owner: vaban-ru
- License: mit
- Created: 2021-01-19T12:38:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-13T04:36:23.000Z (over 1 year ago)
- Last Synced: 2025-03-12T00:34:30.636Z (8 months ago)
- Topics: bottom-sheet, component, vue, vuejs
- Language: Vue
- Homepage: https://bs.vaban.ru
- Size: 678 KB
- Stars: 220
- Watchers: 1
- Forks: 47
- Open Issues: 11
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# Vue Bottom Sheet
A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [hammer.js](https://hammerjs.github.io/) for Vue 3
- [Vue 2 Version](https://github.com/vaban-ru/vue-bottom-sheet-vue2)
- :clapper: [Demo](https://bs.vaban.ru/)
## Installation
### NPM
```
npm install @webzlodimir/vue-bottom-sheet
```
### Yarn
```
yarn add @webzlodimir/vue-bottom-sheet
```
## Usage
```vue
Lorem Ipsum
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text
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();
}
```
## Usage `setup` + TS
```vue
Lorem Ipsum
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text
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();
}
```
## Usage in Nuxt 3
For Nuxt 3, just wrap component in ``
```vue
Lorem Ipsum
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text
```
## 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:
```vue
Lorem Ipsum
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text
```