|
1 | | -# Vue 3 + TypeScript + Vite |
| 1 | +# Vue Spring Bottom Sheet |
2 | 2 |
|
3 | | -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
| 3 | +**vue-spring-bottom-sheet** is built on top of **[@vueuse/gesture]** and **[@vueuse/motion]**. |
4 | 4 |
|
5 | | -Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
| 5 | +😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js |
| 6 | + |
| 7 | +- **Fluid Transitions:** Snap points ensure smooth and performant animations. |
| 8 | +- **Optimized for Accessibility:** Keyboard support for a seamless user experience. |
| 9 | +- **Adaptable Interaction Models:** Blocking and non-blocking for different use cases. |
| 10 | + |
| 11 | +# Installation |
| 12 | + |
| 13 | +``` |
| 14 | +npm install @douxcode/vue-bottom-sheet |
| 15 | +``` |
| 16 | + |
| 17 | +# Getting started |
| 18 | + |
| 19 | +## Basic usage |
| 20 | + |
| 21 | +```vue |
| 22 | +<script setup> |
| 23 | +import VueBottomSheet from '@douxcode/vue-bottom-sheet' |
| 24 | +import '@douxcode/vue-bottom-sheet/dist/style.css' |
| 25 | +import { ref } from 'vue' |
| 26 | +
|
| 27 | +const myBottomSheet = ref(null) |
| 28 | +
|
| 29 | +const open = () => { |
| 30 | + myBottomSheet.value.open() |
| 31 | +} |
| 32 | +
|
| 33 | +const close = () => { |
| 34 | + myBottomSheet.value.close() |
| 35 | +} |
| 36 | +</script> |
| 37 | +
|
| 38 | +<template> |
| 39 | + <BottomSheet ref="myBottomSheet"> Your awesome content </BottomSheet> |
| 40 | +</template> |
| 41 | +``` |
| 42 | + |
| 43 | +## Basic usage `setup` + TS |
| 44 | + |
| 45 | +```vue |
| 46 | +<script setup lang="ts"> |
| 47 | +import VueBottomSheet from '@douxcode/vue-bottom-sheet' |
| 48 | +import '@douxcode/vue-bottom-sheet/dist/style.css' |
| 49 | +import { ref } from 'vue' |
| 50 | +
|
| 51 | +const myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>() |
| 52 | +
|
| 53 | +const open = () => { |
| 54 | + myBottomSheet.value.open() |
| 55 | +} |
| 56 | +
|
| 57 | +const close = () => { |
| 58 | + myBottomSheet.value.close() |
| 59 | +} |
| 60 | +</script> |
| 61 | +
|
| 62 | +<template> |
| 63 | + <BottomSheet ref="myBottomSheet"> Your content </BottomSheet> |
| 64 | +</template> |
| 65 | +``` |
| 66 | + |
| 67 | +## Usage in Nuxt 3 |
| 68 | + |
| 69 | +For Nuxt 3, just wrap component in `<client-only>` |
| 70 | + |
| 71 | +```vue |
| 72 | +<template> |
| 73 | + <ClientOnly> |
| 74 | + <template> |
| 75 | + <BottomSheet ref="myBottomSheet"> Your awesome content </BottomSheet> |
| 76 | + </template> |
| 77 | + </ClientOnly> |
| 78 | +</template> |
| 79 | +``` |
| 80 | + |
| 81 | +## Props |
| 82 | + |
| 83 | +| Prop | Type | Description | Example | Defaults | |
| 84 | +| ------------------- | ------- | -------------------------------------------------------------------------------- | --------------------------------------- | --------- | |
| 85 | +| snapPoints | Number | Define custom snapping positions for the bottom sheet | `:default-breakpoint="[300, 600, 900]"` | true | |
| 86 | +| defaultBreakpoint | Number | Specify the default breakpoint | `:default-breakpoint="600"` | true | |
| 87 | +| blocking | Boolean | Control whether the bottom sheet blocks interactions with the underlying content | `:blocking="true"` | true | |
| 88 | +| canSwipeClose | Boolean | Enable or disable swiping gestures to close the sheet | `:can-swipe-close="true"` | true | |
| 89 | +| canOverlayClose | Boolean | Allow tapping on overlay to close it | `:can-overlay-close="false"` | true | |
| 90 | +| expandOnContentDrag | Boolean | Enable expanding the sheet by dragging its content | `:expand-on-content-drag="#0000004D"` | #0000004D | |
| 91 | + |
| 92 | +## Exposed methods |
| 93 | + |
| 94 | +| Method | Description | Example | |
| 95 | +| ----------- | ------------------------------------------------------------------------ | ----------------------------------- | |
| 96 | +| snapToPoint | Fire when card component is opened | `myBottomSheet.value.snapToPoint()` | |
| 97 | +| open | Fires when min-height of sheet has changed and passes it as an argument | `myBottomSheet.value.open()` | |
| 98 | +| close | Fires when max-height of window has changed and passes it as an argument | `myBottomSheet.value.close()` | |
| 99 | + |
| 100 | +## Events |
| 101 | + |
| 102 | +| Event | Description | Example | |
| 103 | +| ---------- | ------------------------------------------------------------------------ | ------------------------- | |
| 104 | +| min-height | Fires when min-height of sheet has changed and passes it as an argument | `@min-height="(n) => {}"` | |
| 105 | +| max-height | Fires when max-height of window has changed and passes it as an argument | `@max-height="(n) => {}"` | |
| 106 | +| opened | Fire when card component is opened | `@opened="() => {}"` | |
| 107 | +| closed | Fire when card component is closed | `@closed="() => {}"` | |
| 108 | + |
| 109 | +[@vueuse/gesture]: https://gesture.vueuse.org/ |
| 110 | +[@vueuse/motion]: https://motion.vueuse.org/ |
0 commit comments