How to swipe a new content up from bottom using the swipe bottom or tab

Ionic Framework ionic-v3
1

Started playing with ionic 3 , suddenly stuck at a functionality using ionic 2 . no idea of what to use .

In my dashboard I have two rows , row-1 have a slider and row-2 has a four (2*2) boxes .Now the tricky part is there is a 100% new row or a div anything at the bottom of the screen . When user clicks or swipe on that div or a row that button slides up with a new content holding list of options . should swipe from bottom to up . like a swipe up in iPhone , where you get WiFi , brightness ,Bluetooth options . Like that .

Here is an example which works on hover . How to make by swiping from bottom to top or click a button that slides up with a new content .

Here is the StackOverflow question which i posted

2

I found two solutions both worked for me . You have to customize according to your conditions

1> http://arielfaur.github.io/ionic-pullup/ --> I have used and easy to customise
2> https://www.joshmorony.com/how-to-create-a-sliding-drawer-component-for-ionic-2/ -->it works but i was finding diffcult to customize

3

I had the similar problem and created a component which might suite your needs. You can find it here https://github.com/toniantunovi/ion-bottom-drawer

5 Likes