Question

在标签之间切换时，将RTL方向应用于Angualr Material Tabs控制，the animation breaks。

<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>

是否有一个已知的解决方法？

reproduce demo

Answer 1

这可能是一个错误，但是您现在可以使用此解决方法来修复它。在页面中设置一些CSS：

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

Working Demo

Answer 2

您需要将 dir 放入 mat-tab-group 本身，并且容器必须为 ltr

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

Answer 3

我建议您在Angular Material项目的GitHub中打开一个问题，看起来像是个错误。我在Chrome和Edge浏览器中尝试了您的示例，而动画问题仅在Edge中的Chrome中有效，并且可以正常工作。

如果没有动画，您可以使用NoopAnimationsModule代替BrowserAnimationsModule来删除所有动画。

Answer 4

这个问题确实是一个错误。它已修复，并于今天（在本文发布时15分钟前）合并到github上的Master分支。

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

下一个主要版本将解决此错误。同时，您应该使用@moilkh的答案。

角度材料选项卡控件 - RTL

4 个答案: