Question

我希望Angular材质标签的mat-ink-bar获取标签标题文字宽度的宽度。目前它大于选项卡标题文本宽度。

下图显示了它现在的样子。

下面的图片展示了我希望它如何。

你能帮助我解决这个问题吗？

Answer 1

我在css伪类之前和之后使用了它，但是是为了减少一定数量的mat-ink-bar宽度。请参见下面的SCSS代码

  mat-ink-bar {           
                &:before,
                &:after {
                    content: "";
                    height: 2px;
                    width: 20px;
                    background-color: white;
                    position: absolute;
                    left: 0;
                }
                &:after {
                    left: initial;
                    right: 0;
                }
            }

Answer 2

我通过删除最小宽度和.mat-tab-label类的填充实现了这一点。并按照我的要求增加边距，以使标签分开。用作mat-ink-bar时使用mat-tab-label的宽度，该宽度设置为min-width为160px;

Answer 3

只需删除现有mat-link-bar的背景色（使用background-color: transparent），然后使用pseudo类创建新样式即可。

     .mat-ink-bar {
        background-color: transparent;
        &::before {
          content: '';
          display: block;
          width: 90%;
          background-color: #47a1f6;
          height: 6px;
          border-bottom-right-radius: 70px;
          border-bottom-left-radius: 70px;
          left: 5%;
          position: relative;
        }
      }

看起来像这样：

如何设置Angular材质选项卡的mat-ink-bar以获取选项卡标题文本宽度的宽度

3 个答案: