使用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?

我进行了一次重击以重现该问题， 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屋！