var drawer = new CupertinoPane('ion-drawer');
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-drawer>
<h1 class="ion-padding">Header</h1>
<div class="list" overflow-y>
<ion-list hide-on-bottom>
<ion-list-header>
Recent Conversations
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Finn</h2>
<h3>I'm a big deal</h3>
<p>Listen, I've had a pretty messed up day...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Han</h2>
<h3>Look, kid...</h3>
<p>I've got enough on my plate as it is, and I...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Rey</h2>
<h3>I can handle myself</h3>
<p>You will remove these restraints and leave...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Luke</h2>
<h3>Your thoughts betray you</h3>
<p>I feel the good in you, the conflict...</p>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Online
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Poe</h2>
<h3>New Ride</h3>
<p>I just upgraded my X-Wing. Next time...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Ben</h2>
<h3>Move Along</h3>
<p>These aren't the droids you're looking for...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Leia</h2>
<h3>You're My Only Hope</h3>
<p>I've placed information vital to the survival...</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
</ion-avatar>
<ion-label>
<h2>Yoda</h2>
<h3>Size matters not</h3>
<p>Do or do not. There is no try...</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</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>