Clever Geek Handbook

How to enable swipe to next tab gesture for tabs module in Angular Material? (looking for a solution that works on more than 2 tabs)

I am using tabs component in angular material: https://material.angular.io/components/component/tabs

Is there a way to make it so that I can scroll to the content area of ​​a tab to trigger the transition to the next tab?

My current html template:

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

I have imported hammerjs and the documentation doesn't seem to mention anything about it, although I could swear I've seen something like this before ...

Specifically, I want to be able to click and drag it to the left so that it will skip the left left tab. And click and drag the mouse to the right so that it slides to the right of the right tab.

+3


source to share


2 answers


here is a simple way to do it:

working plucker: https://plnkr.co/edit/uJ3n8XedvCCdeUHXKpwX?p=preview

first add hammerjs to your module:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

indicate providers 



  providers: [{ 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: HammerGestureConfig 
                }]

sample module:

@NgModule({

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],

  declarations: [TabsOverviewExample],
  bootstrap: [TabsOverviewExample],
  providers: [{ 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: HammerGestureConfig 
                }]
})
export class PlunkerAppModule {}

then create your component like this:

import {Component, AfterViewInit, ViewChild, ViewChildren} from '@angular/core';
import { MdTabGroup, MdTab } from '@angular/material';


@Component({
  selector: 'tabs-overview-example',
  template:`
  <md-tab-group [selectedIndex]="selected"  (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)">
    <md-tab label="Tab 1"><div class="content">Content 1</div></md-tab>
    <md-tab label="Tab 2"><div class="content">Content 2</div></md-tab>
    <md-tab label="Tab 3"><div class="content">Content 3</div></md-tab>
    <md-tab label="Tab 4"><div class="content">Content 4</div></md-tab>
    <md-tab label="Tab 5"><div class="content">Content 5</div></md-tab>
  </md-tab-group>`,
  styles:['.content{ height: 500px; background-color: yellow;}']
})
export class TabsOverviewExample implements AfterViewInit{
  @ViewChild(MdTabGroup) group;
  @ViewChildren(MdTab) tabs;
  tab_num = 0;
  selected = 0;
  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  number_tabs
  ngAfterViewInit(){
    this.tab_num = this.tabs.length
    console.log(this.group)
  }
  swipe(eType){
    console.log(eType);
    if(eType === this.SWIPE_ACTION.LEFT && this.selected > 0){
      console.log("movin left")
      this.selected--;
    }
    else if(eType === this.SWIPE_ACTION.RIGHT && this.selected < this.tab_num){
      console.log("movin right")
      this.selected++;
    }
    console.log(this.selected)
  }


}
+3


source


This worked for me

https://plnkr.co/edit/VC270mPwh2o8CbMt9u7k?p=preview

Template



<div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
<md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
  <md-tab label="Tab 1" (swipeleft)="swipe(1, $event.type)" (swiperight)="swipe(1, $event.type)">
      Content 1
    </md-tab>
  <md-tab label="Tab 2" (swipeleft)="swipe(2, $event.type)" (swiperight)="swipe(2, $event.type)">Content 2</md-tab>
</md-tab-group>
</div>

component

export class TabsOverviewExample {


  selectedIndex: number = 1;

  selectChange(): void{
    console.log("Selected INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
  console.log("swipe");
    console.log("number",selectedIndex);
    console.log("action",action);
    // Out of range
    if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return;

    // Swipe left, next tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isLast = this.selectedIndex === 1;
      this.selectedIndex = isLast ? 0 : this.selectedIndex + 1;
      console.log("Swipe right - INDEX: " + this.selectedIndex);
    }

    // Swipe right, previous tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isFirst = this.selectedIndex === 0;
      this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1;
      console.log("Swipe left - INDEX: " + this.selectedIndex);
    }
  }
}
+2


source






More articles:


All Articles