var canDismiss = false; var element = document.querySelector('ion-drawer'); var drawer = new CupertinoPane(element, { initialBreak: 'top', breaks: { top: { enabled: true, height: window.innerHeight - (335 * 0.35), bounce: false }, middle: { enabled: false, height: 300, bounce: true }, bottom: { enabled: true, height: 100, bounce: true }, }, fastSwipeSensivity: 3, bottomClose: true, events: { onWillDismiss: (e) => onWillDismiss(e) } }); window.onload = async function () { await document.querySelector('ion-app').componentOnReady(); drawer.present({animate: true}); drawer.preventDismiss(true); } async function onWillDismiss(e) { console.log(e); if (e?.prevented) { presentActionSheet(); } }; async function presentDrawer() { drawer.present({animate: true}); }; async function destroyDrawer() { drawer.destroy({animate: true}); }; async function openActionSheet(opts) { const actionSheet = await actionSheetController.create(opts); await actionSheet.present(); } async function presentActionSheet() { const mode = Ionic.mode; await openActionSheet({ header: "Are you really want to close pane ?", buttons: [{ text: 'Dismiss', role: 'destructive', icon: 'close', handler: () => { drawer.preventDismiss(false); drawer.destroy({animate: true}); } }, { text: 'Cancel', icon: mode === 'md' ? 'close' : null, role: 'cancel' }] }); }
<script type="module"> import { actionSheetController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js'; window.actionSheetController = actionSheetController; </script> <ion-app> <ion-content scroll-y="false"> <ion-drawer> <h1>Header</h1> <p hide-on-bottom>Content</p> </ion-drawer> <h5 class="ion-margin"> Try to destroy pane </h5> <p class="ion-margin"> Show alert and prevent pane from destroy if condition is not true </p> </ion-content> </ion-app>
ion-content { --background: #f8f8f8; } ion-drawer, ion-extra-drawer { padding: 0 20px; } ion-slides { height: 150px; }