var drawer = new CupertinoPane('ion-drawer', { parentElement: 'body', backdrop: true, breaks: { middle: { enabled: true, height: 350 } }, zStack: { pushElements: ['ion-content'], minPushHeight: 350, } }); window.onload = async function () { await document.querySelector('ion-app').componentOnReady(); presentDrawer(); } 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'); };
<!DOCTYPE html> <html dir="ltr" mode="ios"> <body> <ion-app> <ion-content> <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 Middle</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;}