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:

8 Likes

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.
ezgif-6-31292bd54f9a

@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?

@colinharker5

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.

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