Google Map-like sliding bottom sheet panel?


#1

I searched Google and found https://www.joshmorony.com/how-to-create-a-sliding-drawer-component-for-ionic-2/ but since it is a little bit old and there are some comments about problems, and it would take quite a lot of work to test it, I would like to know if it is the best option before applying it to my app. Or is there something similar in the framework itself? I could not find one. Clearly, Action Sheet is not something I want; I want the same thing as the sliding panel of Google Map.

I mean the following behaviours. They are long, but, in short, it is just how the bottom panel of Google Maps works.

  • When I need to display some data for a marker on the map, the panel needs to be docked at bottom.
  • When the user scrolls up on the panel, it gradually goes up to cover the whole page area. There is one slight difference. Since Google Map is not a tab-based app, the panel fills the entire screen. But my app is tap-based, so I want the panel contained inside the tab page. That is the panel should be above the tab bar, and when covering the screen, it should not cover the tab bar.
  • While the panel being scrolled up, the content of the panel should not be scrolled but only the panel grows up, just like Google Maps.
  • When it is filling the entire page area, there should be a <- (back button) to dismiss the panel. If the content on the panel is long, it should now be scrollable.

#2

my fellow
I have the same problem. if you found a solution or any clues, please let me know.


#3

My fellow. I am sorry to say that I had given up and restarted with the native Android development.


#4

See: https://developers.google.com/maps/documentation/javascript/examples/control-positioning