@douxcode/vue-spring-bottom-sheet 1.0.1 → 1.0.3
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 +41 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -90,33 +90,55 @@ For Nuxt 3, just wrap component in `<client-only>`
|
|
|
90
90
|
|
|
91
91
|
## Props
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
93
|
+
### Prop Definitions
|
|
94
|
+
|
|
95
|
+
| Prop | Type | Description | Example |
|
|
96
|
+
| ------------------- | -------- | ----------------------------------------------------------------------------- | -------------------------------- |
|
|
97
|
+
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` |
|
|
98
|
+
| defaultSnapPoint | Number | Specifies the default snap point | `:default-snap-point="600"` |
|
|
99
|
+
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content | `:blocking="true"` |
|
|
100
|
+
| canSwipeClose | Boolean | Enables or disables swipe gestures for closing the sheet | `:can-swipe-close="true"` |
|
|
101
|
+
| canOverlayClose | Boolean | Allows tapping the overlay to close the sheet | `:can-overlay-close="true"` |
|
|
102
|
+
| expandOnContentDrag | Boolean | Enables expanding the sheet by dragging its content | `:expand-on-content-drag="true"` |
|
|
103
|
+
|
|
104
|
+
### Default Values
|
|
105
|
+
|
|
106
|
+
| Prop | Default |
|
|
107
|
+
| ------------------- | -------------------------- |
|
|
108
|
+
| snapPoints | `minHeight` |
|
|
109
|
+
| defaultSnapPoint | `minHeight / minSnapPoint` |
|
|
110
|
+
| blocking | `true` |
|
|
111
|
+
| canSwipeClose | `true` |
|
|
112
|
+
| canOverlayClose | `true` |
|
|
113
|
+
| expandOnContentDrag | `true` |
|
|
101
114
|
|
|
102
115
|
## Exposed methods
|
|
103
116
|
|
|
104
117
|
Assuming there is `const bottomSheet = ref()`
|
|
105
118
|
|
|
106
|
-
| Method | Description
|
|
107
|
-
| ----------- |
|
|
108
|
-
| snapToPoint |
|
|
109
|
-
| open |
|
|
110
|
-
| close |
|
|
119
|
+
| Method | Description | Example |
|
|
120
|
+
| ----------- | ------------------------------------ | ------------------------------------ |
|
|
121
|
+
| snapToPoint | Snaps the sheet to a specified point | `bottomSheet.value.snapToPoint(300)` |
|
|
122
|
+
| open | Opens the bottom sheet | `bottomSheet.value.open()` |
|
|
123
|
+
| close | Closes the bottom sheet | `bottomSheet.value.close()` |
|
|
111
124
|
|
|
112
125
|
## Events
|
|
113
126
|
|
|
114
|
-
| Event | Description
|
|
115
|
-
| ---------- |
|
|
116
|
-
| min-height | Fires when
|
|
117
|
-
| max-height | Fires when
|
|
118
|
-
| opened |
|
|
119
|
-
| closed |
|
|
127
|
+
| Event | Description | Example |
|
|
128
|
+
| ---------- | ------------------------------------------------------------------------------------- | ------------------------- |
|
|
129
|
+
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"` |
|
|
130
|
+
| max-height | Fires when the maximum height of the window changes. Passes the value as an argument. | `@max-height="(n) => {}"` |
|
|
131
|
+
| opened | Fires when the bottom sheet is opened | `@opened="() => {}"` |
|
|
132
|
+
| closed | Fires when the bottom sheet is closed | `@closed="() => {}"` |
|
|
133
|
+
|
|
134
|
+
## Acknowledgments
|
|
135
|
+
|
|
136
|
+
This project was inspired by the following:
|
|
137
|
+
|
|
138
|
+
- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
|
|
139
|
+
- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
|
|
120
140
|
|
|
121
141
|
[@vueuse/gesture]: https://gesture.vueuse.org/
|
|
122
142
|
[@vueuse/motion]: https://motion.vueuse.org/
|
|
143
|
+
[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
|
|
144
|
+
[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet
|