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.