Угловой контроль материала - RTL

Question

При применении направления RTL к вкладкам Angualr Material control, анимация прерывается при переключении между вкладками.

<div dir="rtl">
  <mat-tab-group>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
  </mat-tab-group>
</div>

Есть ли известное исправление к этому?

Воспроизвести демо

Answer 1

Возможно, это ошибка, но вы можете исправить это с помощью этого временного решения. установить некоторые CSS на вашей странице:

.mat-tab-header{
direction:rtl;
}
.mat-tab-body-wrapper{
text-align:right
}

Рабочая демоверсия

Answer 2

Эта проблема действительно была ошибкой. это было исправлено и объединено с веткой Master на github сегодня (15 минут назад на момент публикации).

https://github.com/angular/material2/pull/12215

В следующем основном выпуске эта ошибка будет устранена. тем временем вы должны использовать ответ @ moilkh.

Answer 3

Я предлагаю вам открыть проблему в GitHub в проекте Angular Material , похоже, что это ошибка. Я попробовал ваш пример в браузере Chrome и Edge, и проблема с анимацией возникает только в Chrome, в Edge все работает нормально.

Если вы можете жить без анимации, вы можете использовать NoopAnimationsModule вместо BrowserAnimationsModule, который удаляет все анимации.