如何设置Angular material tab的mat-ink-bar取tab header text width的宽度

Question

我希望 Angular 材质选项卡的垫墨栏采用选项卡 header 文本宽度的宽度。 目前，它大于选项卡 header 文本宽度。

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

下图显示了我想要的样子。

你能帮我怎么做吗？

Answer 1

我通过删除 .mat-tab-label 类上的 min-width 和 padding 来实现这一点......并根据我的要求添加边距以保持标签分开。 这是因为 mat-ink-bar 采用了 mat-tab-label 的宽度，将 min-width 设置为 160px；

社会保障：

mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
    margin-bottom: 12px;
    .mat-tab-labels {
    .mat-tab-label {
        padding: 0 0 !important;
        min-width: 10px;
        margin-left: 95px;
    }
    }
}
}

Answer 2

我已经在 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 3

只需删除现有mat-link-bar background-color: transparent （使用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;
        }
      }

看起来像这样：

Answer 4

在 Angular Material 的更高版本（当前为 15）中，您现在可以选择使用fitInkBarToContent属性。

<mat-tab-group fitInkBarToContent>
  <mat-tab label="Tab">Content</mat-tab>
</mat-tab-group>

请参阅https://material.angular.io/components/tabs/examples#tab-group-ink-bar下的示例