如何設置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下的示例