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

【问题标题】：How to set the Angular material tab's mat-ink-bar to take the width of tab header text width如何设置 Angular 材质选项卡的 mat-ink-bar 取选项卡标题文本宽度的宽度
【发布时间】：2021-07-07 21:57:28
【问题描述】：

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

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

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

您能帮我解决这个问题吗？

【问题讨论】：

墨条的宽度遵循 Material Design 准则，不应更改。 IMO 由于其实施方式，即使不是不可能，也将非常困难。
如果他们不允许我们修改他们的样式以使它们在我们的应用程序中可用，也许我们应该停止使用他们的库。可笑。

标签： css angular angular-material angular-material2

【解决方案1】：

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

SCSS：

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

【讨论】：

mat-tab-header {border-bottom: none !important; .mat-tab-label-container { margin-bottom: 12px; .mat-tab-labels { .mat-tab-label { padding: 0 0 !important;最小宽度：10px；左边距：95px； }}}} @shaheershukur
这是scss代码？我将其转换为 CSS。但它仍然不起作用。

【解决方案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;
                }
            }

【讨论】：

如果您需要将可点击区域保持在彼此相邻以便不能使用边距，则非常适合。

【解决方案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;
        }
      }

看起来像这样：

【讨论】：