Mat-tab-group header быстрее анимирует прокрутку - PullRequest
Новая
       0

Mat-tab-group header быстрее анимирует прокрутку

1 голос
/ 07 октября 2019

Когда у меня есть ряд вкладок, которые шире их ширины дисплея, появляются шевроны. Мне это нравится, но нажатие на них перемещает вкладки медленно, а не на следующую вкладку. Существует ли конфигурация для управления скоростью прокрутки, а также способ отображения следующей вкладки?

Вот блик стека: https://stackblitz.com/edit/angular-79cupm

1 Ответ

0 голосов
/ 08 октября 2019

В ваших main.ts вы должны добавить это к вашим импортам:

import { MAT_TABS_CONFIG } from '@angular/material/tabs';

Затем вы можете изменить значение InjectionToken, добавив его в массив вашего провайдера:

{ provide: MAT_TABS_CONFIG, useValue: { animationDuration: 100 }}

При такой конфигурации время анимации будет 100 мс 

import './polyfills';

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from './material-module';

import {TabGroupBasicExample} from './app/tab-group-basic-example';
import { MAT_TABS_CONFIG } from '@angular/material/tabs';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TabGroupBasicExample],
  declarations: [TabGroupBasicExample],
  bootstrap: [TabGroupBasicExample],
  providers: [
    { provide: MAT_TABS_CONFIG, useValue: { animationDuration: 100 }}
  ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

Пример работы Stackblitz: https://stackblitz.com/edit/angular-79cupm-39vcws Надеюсь, я смог вам помочь:)

...