var drawer = new CupertinoPane('ion-drawer', { followerElement: 'ion-fab', buttonClose: false, initialBreak: 'bottom', breaks: { top: { enabled: 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'); };
<html mode="ios"> <body> <ion-app> <ion-content> <ion-fab horizontal="end" vertical="bottom"> <ion-fab-button size="small"> <ion-icon name="add"></ion-icon> </ion-fab-button> </ion-fab> <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" onclick="hideDrawer()">Hide Drawer</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-fab { margin-bottom: 120px; } ion-drawer { margin: 0 20px; }