Swipe on element (to hide and show)?

Ionic Framework ionic-v3
1

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.


Page

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

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:

Cheers,
Ben

2

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 ?

3

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

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

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