Swipe on element (to hide and show)?

Hello Guys,

is there an easy way so make the Chat part in my App hiding by swiping?

Basicly, I want to swipe on the Chat from top to bottom on the <ion-row class="chat"> element to hide the Chat and then, when I swipe on the <ion-row class="livestream"> element bottom to top to show the Chat.


<ion-content *ngFor="let data of data">
    <ion-row class="livestream">
      <iframe class="livestream" [src]="data.video | safeUrl"
              frameborder="0" allowfullscreen></iframe>
    <ion-row class="chat">
      <iframe class="livechat" [src]="data.chat | safeUrl"
              frameborder="0" allowfullscreen></iframe>

I can program that myself to work… but there must a ready to use class, event etc. or not? I don’t want to revent the wheel :slight_smile:


Yes that is indeed possible, but I need more details to actually help you out here.

As example where should the chat go ? Should it just fade away or do you want to switch to a different Page ? Can you post some screenshots of the Pages App itself and how it should look like when you swipe it out ?

Try listening to HammerJs gesture events, here is an example:

<ion-row class="livestream" (swipeup)="showChat()">

More swipe events can be found here: http://hammerjs.github.io/recognizer-swipe