Question

我想在页面顶部添加一些标签，我想将它们集中在一起。然而，当我打开sidenav时，我正在使标签下方的墨水条未对齐。单击任一选项卡将重置墨迹，然后重新正确地重新定位。如何使墨条正确对齐？

我在我的组件上使用ViewEncapsulation.None，我已经覆盖mat-tab-list的css，如下所示：

.mat-tab-list{
  display: flex;
  justify-content: center;
}

也许还有另一种（正确的）方法可以使标签居中，以便我可以避免这种行为？

我已经制作了一个stackblitz来重现这个问题， https://stackblitz.com/edit/angular-thrvh6（桌面大小的窗口出现问题，而不是移动大小的窗口）

Answer 1

似乎将sidenav的mode属性设置为push可以解决问题。但是，它会更改组件的显示方式，因为当sidenav打开时，右侧的内容会部分显示为灰色;这是否是可以接受的行为取决于你。

Answer 2

我也遇到了这个问题。当材料侧面导航的模式设置为“侧面”时，垫纸墨水栏不会重新计算。这是我在CSS中的工作（我隐藏了mat-ink-bar并在样式后使用＆::）：

.mat-tab-label-active {
    .mat-tab-label-content {
      font-weight: bold;
      color: black;

      &:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: $blue-3;
        right: 0;
        bottom: 0;
      }
   }
}

mat-ink-bar {
  display: none !important;
}

使用角度材质

2 个答案: