Заголовок группы Mat-Tab-Group быстрее анимирует прокрутку

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

Вот stackblitz: https://stackblitz.com/edit/angular-79cupm


angular angular-material
person bradrice    schedule 07.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем 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 Надеюсь, я смог вам помочь :)

person Marcel    schedule 08.10.2019
comment
Разве это не меняет анимацию содержимого вкладки? Я пытаюсь изменить анимацию заголовков вкладок, когда вы нажимаете шевроны в строке вкладок. Он очень медленный, и было бы неплохо, если бы он переходил на следующую вкладку, а не на определенное количество пикселей за раз. - person bradrice; 08.10.2019
comment
Хорошо, извините, тогда я вас не понял... Этого можно легко добиться с помощью CSS-кода. Просто добавьте :host ::ng-deep .mat-ink-bar { transition: none; } в свой tab-group-basic-example.css - person Marcel; 09.10.2019