Hello, first let me thank you for this component.
I'm trying to use in my new project that uses Angular and Ionic.
I want to add two panes and make them have different behaviors.
The first one must be able to start "middle" and reach "top", but not "bottom".
This pane should not be able to close.
The second one must be able to start "middle", but should not have "top" or "bottom".
This pane should not be able to close, go "bottom" or "top".
this.BottomDrawerOne = new CupertinoPane("#bottom-drawer-details",
{
animationType: "ease-in-out",
clickBottomOpen: false,
buttonClose: false,
breaks:
{
top: { enabled: true, offset: window.screen.height },
middle: { enabled: true, offset: 430 },
bottom: { enabled: false },
},
});
this.BottomDrawerOne.present({ animate: true });
The first one starts middle can go to top, but it's also possible to closed it on drag/swipe bottom.
this.BottomDrawerTwo = new CupertinoPane("#bottom-drawer-tracking",
{
animationType: "ease-in-out",
clickBottomOpen: false,
showDraggable: false,
bottomClose: false,
buttonClose: false,
initialBreak: "bottom",
breaks:
{
top: { enabled: false },
middle: { enabled: true, offset: 270 },
bottom: { enabled: false },
},
});
The second one starts middle can't go to top, it's fixed middle, but it's also possible to closed it on drag/swipe bottom.
How can I setup my panes to work as expected?