let topHeight = 600;
let middleHeight = 350;
let content = document.querySelector('ion-drawer .content');
var drawer = new CupertinoPane('ion-drawer', {
breaks: {
top: { enabled: true, height: topHeight },
middle: { enabled: true, height: middleHeight },
bottom: { enabled: true, offset: 90 }
},
initialBreak: 'middle',
dragBy: ['.draggable', 'ion-drawer h1'],
events: {
onDrag: () => {
content.style.height = `${window.screen.height
- getPaneTransformY()
- content.offsetTop}px`;
content.setAttribute('style', 'overflow-y: hidden !important');
},
onDidPresent: () => {
content.setAttribute('style', 'overflow-y: auto !important');
content.style.height = `${middleHeight - content.offsetTop}px`;
},
onTransitionEnd: () => {
setTimeout(() => {
setHeight();
}, 200)
}
}
});
window.onload = async function () {
await document.querySelector('ion-app').componentOnReady();
drawer.present({animate: true})
}
function setHeight() {
content.setAttribute('style', 'overflow-y: auto !important');
if (drawer.currentBreak() === 'top') {
content.style.height = `${topHeight - content.offsetTop}px`;
}
if (drawer.currentBreak() === 'middle') {
content.style.height = `${middleHeight - content.offsetTop}px`;
}
}
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 mode="ios">
<body>
<ion-app>
<ion-content>
<ion-drawer>
<h1 class="ion-padding">Header</h1>
<div class="content" 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-content>
</ion-app>
</body>
</html>
ion-drawer {
padding: 0 20px;
}
ion-drawer .content {
overflow-y: auto !important;
}
ion-drawer h1 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}