如何启用滑动手势以移动到 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)

问题描述

我在 angular material 中使用 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.

推荐答案

这里有一个简单的方法:

here is a simple way to do it:

工作plunker:https://plnkr.co/edit/uJ3n8XedvCCdeUHXKpwX?p=preview

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

first, add hammerjs to your module:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-b​​rowser';

在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屋！