如何在Angular Material中启用滑动手势以移动到标签模块的下一个标签? (寻找适用于2个以上标签的解决方案) [英] How to enable swipe gesture to move to next tab for tabs module in Angular Material? (looking for a solution that works for more than 2 tabs)

问题描述

我在有角材质中使用了tabs组件: https://material.angular.io/组件/组件/标签

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

有没有一种方法可以使我可以在标签的内容区域上滑动以触发移至下一个标签?

Is there a way to make it such that I can swipe on the content area of the tab to trigger moving to the next tab?

我当前的模板html:

My current template html:

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

我已经导入了Hammerjs，即使我发誓我以前也曾经看过类似的东西，但文档似乎没有提及此事.

I have hammerjs imported, and the documentation appears to not mention anything about this even though I could have sworn I've seen something like this before...

具体来说，我希望能够向左单击并拖动鼠标，以使其向左滑动到左侧选项卡.然后向右点击并拖动鼠标，以使其在右侧的选项卡上向右滑动.

Specifically I want to be able to click and drag my mouse towards the left to have it swipe left to the left tab. And click and drag my mouse towards the right to have it swipe right ot the right tab.

推荐答案

这是一种简单的方法:

正在工作的朋克: https://plnkr.co/edit/uJ3n8XedvCCdeUHXKpwX?p=preview

首先，将Hammerjs添加到您的模块中:

first, add hammerjs to your module:

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

在providers

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

示例模块:

@NgModule({

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

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

然后按如下所示构建您的组件:

then build 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)
  }


}

这篇关于如何在Angular Material中启用滑动手势以移动到标签模块的下一个标签? (寻找适用于2个以上标签的解决方案)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！