Bottom drawer (Cupertino Pane)

Hey guys, i did create bottom drawer slider, especially for using in my ionic applications.
But it’s also support other javascript frameworks. :rocket:

Everybody welcome! Please push the start if you gonna use it :star:


I haven’t tested it yet but it looks nice. Is it fully compatible with ionic 4?

Sure, all js frameworks, but the best experience with Ionic on devices.

I have used this on two of my ionic projects already, it’s so easy to implement that it could throw you off :laughing:, nice job :clap: I spent a long time trying to find something like this and kept wondering why it isn’t provided by default…
something I noticed though is that the onDragEnd event works as though it is onDrag if you know what I mean and hiding the draggable element on top of the pane is quite the challenge.

You can try onTransitionEnd instead of onDragEnd.

For hide draggable set config:

let settings = {
  showDraggable: false

If it’s still not fit in your tasks, feel free to open issue in repository :tada:

Oh yeah, I had to eventually use the onTransitionEnd event instead.

How would I be able to have the drawer drop down from the top instead?

Hi @colinharker5
Good idea to implement reversed pane ability. Currently you can realize it like a Starbucks sample
If this ability will receive more requests we will implement it to base version. :wink:

Thanks for the reply! However I’m still having difficulty understanding where in the Starbucks example it is implemented :frowning:

@colinharker5 Pane moved from top to bottom. But a bit hucky.

@Romwtb sorry I wasn’t clear before, looking through the code I was wondering which lines allow the pane to be displayed in this way. Do you translate (flip 180 degrees) the normal pane or is it something else?


Actually this is good imitation.

We still have bottom drawer (green background), and normal <div> container (white background). <div> container we set as followerElement in options and assign dragBy to follower element also.

Corner radius normalized for bottom drawer and rounded for follower element. This customization give illusion of top drawer.
You can also set bottom drawer as transparent with pointer-events:none; And this is will give you full effect of top drawer.

Otherwise wait a little for some top drawer solution. However i think only flip will not enough and pane core should be prepared for support top drawer configuration.

By the way, released 1.1.91 and there top-top-bottom direction activated with simple option: inverse: true

Big Thanks everybody for your support of Cupertino-Pane with stars :star:

We are now available as community at open collective.
And we created some branding assets.

I’m also ready to create pull request and collaborate with ionic team to inject this product into ionic framework.

For every users i would like to present somethings great :tada:
Just check it out Z-stack full

1 Like

Mate do a easy Tutorial to start use it in a Ionic Project please.

Well, it’s easy like:

npm install cupertino-pane --save

Then a little html

<ion-content scroll-y="false">
   <div class="pane">
      Content inside your pane

Then scripts

import { CupertinoPane, CupertinoSettings } from 'cupertino-pane';

public pane: CupertinoPane;
constructor() {

async ngOnInit() {
  let settings: CupertinoSettings = { ... };
  this.pane = new CupertinoPane('.pane', settings);
  await this.pane.present({animate: true});
1 Like

I want implement a custom bottom sheet, and I need it position over all component (incluse nav bar).

But you write div with class=pane in ion-content :thinking:

Have you a link or a docs to use it?

@GosuMania All docs are listed here

You can also specify parent container like this:

let settings: CupertinoSettings = {
  parentElement: 'body'
1 Like