使用 Angular Material 打开 sidenav 时，居中选项卡下的墨条未正确对齐 [英] Ink bar under centered tabs not being aligned properly when opening sidenav using Angular Material

问题描述

我想在我的页面顶部添加一些标签，并且我想让它们居中.但是，当我打开 sidenav 时，标签下的墨水条未对齐.单击任一选项卡将重置墨迹栏，并重新正确定位.如何使墨条正确对齐?

I want to add some tabs on top of my page, and I want to center them. I am however getting the ink bar under the tabs misaligned when I open the sidenav. Clicking on either tab will reset the ink bar, and reposition it correctly though. How can I make the ink bar be aligned properly?

我在我的组件上使用了 ViewEncapsulation.None，并且我已经像这样覆盖了 mat-tab-list 的 css:

I am using ViewEncapsulation.None on my component, and I have overriden the css for mat-tab-list like this:

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

也许有另一种(适当的)方法可以将标签居中，以便我可以避免这种行为?

Maybe there is another (proper) way to center the tabs so that I can avoid this behaviour?

我做了一个stackblitz来重现这个问题，https://stackblitz.com/edit/angular-thrvh6(问题发生在桌面大小的窗口上，不适用于移动大小的窗口)

I have made a stackblitz to reproduce the problem, https://stackblitz.com/edit/angular-thrvh6 (problem occurs on desktop sized windows, not on mobile sized windows)

推荐答案

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

It seems that setting the sidenav's mode property to push fixes the problem. However, it changes how the components are displayed, as the content on the right is partially greyed-out when the sidenav is open; whether this is an acceptable behaviour is up to you.

这篇关于使用 Angular Material 打开 sidenav 时，居中选项卡下的墨条未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！