Vue.js 3 example

[dasturchioka]

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!

[dasturchioka]

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

[roman-rr]

Big thanks @dasturchioka for help. I will add this to example on docs soon.

[roman-rr]

@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

[dasturchioka]

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

[roman-rr]

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.

https://github.com/tech-systems/panes-vue3-example