const topPosition = 600; const backdropOpacity = 1; var drawer = new CupertinoPane('ion-drawer', { backdrop: true, initialBreak: 'middle', breaks: { top: {enabled: true, height: topPosition}, middle: {enabled: true, height: 300}, bottom: {enabled: false} }, backdropOpacity, events: { onBackdropTap: () => destroyDrawer(), onDrag: () => changeOpacity(getPaneTransformY(), 'unset'), onTransitionStart: (e) => changeOpacity(e.translateY.new, 'all 300ms ease 0s') } }); window.onload = async function () { await document.querySelector('ion-app').componentOnReady(); presentDrawer(); } function changeOpacity(val, transition) { const backdrop = document.querySelector('.backdrop'); const topScreen = topPosition; const newScreen = window.screen.height - val; const opacity = (backdropOpacity * newScreen) / topScreen; if (transition) backdrop.style.transition = transition; backdrop.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`; } function getPaneTransformY() { const translateYRegex = /\.*translateY\((.*)px\)/i; const paneEl = document.querySelector('.pane'); return paneEl ? parseFloat(translateYRegex.exec(paneEl.style.transform)[1]) : 0; } async function presentDrawer() { drawer.present({animate: true}); }; async function destroyDrawer() { drawer.destroy({animate: true}); }; async function hideDrawer() { drawer.hide(); }; async function isHiddenDrawer() { console.log(await drawer.isHidden()); }; async function setTopDrawer() { drawer.moveToBreak('top'); }; async function setMiddleDrawer() { drawer.moveToBreak('middle'); }; async function setBottomDrawer() { drawer.moveToBreak('bottom'); };
<html dir="ltr" mode="ios"> <body> <ion-app> <ion-content scroll-y="false"> <ion-drawer> <h1>Header</h1> <p hide-on-bottom>Content</p> </ion-drawer> <ion-button expand="block" color="danger" onclick="presentDrawer()">Present Drawer</ion-button> <ion-button expand="block" color="danger" onclick="destroyDrawer()">Destroy Drawer</ion-button> <ion-button expand="block" onclick="hideDrawer()">Hide Drawer</ion-button> <ion-button expand="block" onclick="isHiddenDrawer()">Drawer is hidden</ion-button> <ion-button expand="block" color="secondary" onclick="setTopDrawer()">Set Top</ion-button> <ion-button expand="block" color="secondary" onclick="setMiddleDrawer()">Set Moddle</ion-button> <ion-button expand="block" color="secondary" onclick="setBottomDrawer()">Set bottom</ion-button> </ion-content> </ion-app> </body> </html>
ion-drawer { padding: 0 20px; }