Closed dasturchioka closed 3 months ago
Hello there again! I share my own code from my project as an example, I hope it helps.
const pane = ref<CupertinoPane>();
onMounted(async () => {
// initialise the pane
pane.value = new CupertinoPane(".sheet-pane", {
breaks: {
top: { enabled: true, height: 460 },
middle: { enabled: true, height: 240 },
bottom: { enabled: true, height: 40 },
},
initialBreak: "top",
draggableOver: true,
parentElement: ".app",
cssClass: "z-50",
buttonDestroy: false,
});
await pane.value.present({ animate: true });
});
To destroy (remove or hide) the pane, you can use this line of code anywhere that you want to hide your pane component:
await pane.value?.destroy();
In order to understand the options that I implemented in this code, visit the official documentation: https://panejs.com/settings.html
For breaks
property especially, I'd really suggest you to take a look at the official documentation to understand what it means:
https://panejs.com/breakpoints.html
Big thanks @dasturchioka for help. I will add this to example on docs soon.
@dasturchioka Here is also Vue 3 wrapper, don't sure its up-to-date, but at least can be explored for examples. https://github.com/Devrax/v-cupertino
Glad to help, @roman-rr. This Vue 3 wrapper didn't work properly the last time I used it. Also the author of this wrapper recommended to use the main library.
https://github.com/Devrax/v-cupertino/issues/3
Created a good basic example of Panes using the Vue 3 framework, including getting control of Panes from parent components and using it as a standalone service.
Hi. Great work on that project. I was really looking for an example for correct way to initialise the pane in a Vue.js 3 project.
Thank you for the answer!