@douxcode/vue-spring-bottom-sheet 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -90,33 +90,42 @@ For Nuxt 3, just wrap component in `<client-only>`
|
|
|
90
90
|
|
|
91
91
|
## Props
|
|
92
92
|
|
|
93
|
-
| Prop | Type | Description
|
|
94
|
-
| ------------------- | -------- |
|
|
95
|
-
| snapPoints | Number[] |
|
|
96
|
-
| defaultSnapPoint | Number |
|
|
97
|
-
| blocking | Boolean |
|
|
98
|
-
| canSwipeClose | Boolean |
|
|
99
|
-
| canOverlayClose | Boolean |
|
|
100
|
-
| expandOnContentDrag | Boolean |
|
|
93
|
+
| Prop | Type | Description | Example | Defaults |
|
|
94
|
+
| ------------------- | -------- | ----------------------------------------------------------------------------- | -------------------------------- | -------- |
|
|
95
|
+
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` | true |
|
|
96
|
+
| defaultSnapPoint | Number | Specifies the default snap point | `:default-snap-point="600"` | true |
|
|
97
|
+
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content | `:blocking="true"` | true |
|
|
98
|
+
| canSwipeClose | Boolean | Enables or disables swipe gestures for closing the sheet | `:can-swipe-close="true"` | true |
|
|
99
|
+
| canOverlayClose | Boolean | Allows tapping the overlay to close the sheet | `:can-overlay-close="true"` | true |
|
|
100
|
+
| expandOnContentDrag | Boolean | Enables expanding the sheet by dragging its content | `:expand-on-content-drag="true"` | true |
|
|
101
101
|
|
|
102
102
|
## Exposed methods
|
|
103
103
|
|
|
104
104
|
Assuming there is `const bottomSheet = ref()`
|
|
105
105
|
|
|
106
|
-
| Method | Description
|
|
107
|
-
| ----------- |
|
|
108
|
-
| snapToPoint |
|
|
109
|
-
| open |
|
|
110
|
-
| close |
|
|
106
|
+
| Method | Description | Example |
|
|
107
|
+
| ----------- | ------------------------------------ | ------------------------------------ |
|
|
108
|
+
| snapToPoint | Snaps the sheet to a specified point | `bottomSheet.value.snapToPoint(300)` |
|
|
109
|
+
| open | Opens the bottom sheet | `bottomSheet.value.open()` |
|
|
110
|
+
| close | Closes the bottom sheet | `bottomSheet.value.close()` |
|
|
111
111
|
|
|
112
112
|
## Events
|
|
113
113
|
|
|
114
|
-
| Event | Description
|
|
115
|
-
| ---------- |
|
|
116
|
-
| min-height | Fires when
|
|
117
|
-
| max-height | Fires when
|
|
118
|
-
| opened |
|
|
119
|
-
| closed |
|
|
114
|
+
| Event | Description | Example |
|
|
115
|
+
| ---------- | ------------------------------------------------------------------------------------- | ------------------------- |
|
|
116
|
+
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"` |
|
|
117
|
+
| max-height | Fires when the maximum height of the window changes. Passes the value as an argument. | `@max-height="(n) => {}"` |
|
|
118
|
+
| opened | Fires when the bottom sheet is opened | `@opened="() => {}"` |
|
|
119
|
+
| closed | Fires when the bottom sheet is closed | `@closed="() => {}"` |
|
|
120
|
+
|
|
121
|
+
## Acknowledgments
|
|
122
|
+
|
|
123
|
+
This project was inspired by the following:
|
|
124
|
+
|
|
125
|
+
- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
|
|
126
|
+
- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
|
|
120
127
|
|
|
121
128
|
[@vueuse/gesture]: https://gesture.vueuse.org/
|
|
122
129
|
[@vueuse/motion]: https://motion.vueuse.org/
|
|
130
|
+
[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
|
|
131
|
+
[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet
|