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

Question

我希望 Angular 材料选项卡的 mat-ink-bar 占据选项卡标题文本宽度的宽度。目前它大于选项卡标题文本宽度。

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

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

你能帮我看看如何做到这一点吗？

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;
                }
            }