let drawer = new CupertinoPane('ion-drawer', { inverse: true, breaks: { top: { enabled: true, height: 500, bounce: false }, middle: { enabled: true, height: 300, bounce: false }, bottom: { enabled: true, height: 100, bounce: false }, } }); 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'); }; async function showBackdrop() { console.log(drawer); drawer.backdrop({show: true}); } async function hideBackdrop() { drawer.backdrop({show: false}); }
<html mode="ios"> <ion-app> <ion-content scroll-y="false"> <ion-drawer> <div class="content"> <h1>Header</h1> <p>This is good example of Cupertino Pane with inversed direction.</p> <p>Events switched into <strong>top-to-bottom</strong></p> </div> </ion-drawer> <div class="buttons-container"> <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" 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> </div> </ion-content> </ion-app> </html>
ion-drawer, ion-extra-drawer { padding: 0 20px; } ion-slides { height: 150px; } .buttons-container { overflow: hidden !important; display: flex; height: 100vh; flex-direction: column; justify-content: flex-end; } .content { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; height: 100%; } h1, p { margin-bottom: 0 !important; }