有沒有辦法像這樣設計 Angular 材質標簽？

Question

我正在嘗試像這樣設計我的 mat-tabs

但是我在丟失當前選定選項卡下的白色邊框時遇到了一些問題。 即使我將 z-index 應用於活動選項卡，向 mat-tab-label-active (with::ng-deep) 添加底部邊框仍然會使一些 mat-tab-labels 的紅色邊框可見。 這可能嗎？ 請參閱下面的當前代碼

 ::ng-deep {.mat-tab-label-active { background: $white; border-top: 0.25em solid $carmine; border-right: 0.25em solid $carmine; border-left: 0.25em solid $carmine; border-bottom: 0.1em solid $white; z-index: 100; }.mat-tab-labels { border-bottom: 0.25em solid $carmine; }.mat-tab-group.mat-primary.mat-ink-bar, { background-color: $white; } }

更新： StackBlitz第一個選項卡仍然顯示容器背景顏色。 我也在努力阻止 animation 在選項卡之間的過渡上，因為所選選項卡在被紅色邊框封裝之前變為白色

Answer 1

嘗試這個：

::ng-deep {
  .mat-tab-label-active {
    background: white;
  }

  .mat-tab-labels {
    border-bottom: 2px solid crimson;
  }

  .mat-tab-group.mat-primary .mat-ink-bar {
    background-color: transparent;
    box-sizing: border-box;
    border-top: 2px solid crimson;
    border-left: 2px solid crimson;
    border-right: 2px solid crimson;
    border-bottom: 2px solid white;
    height: 50px;
  }

  .mat-tab-nav-bar, .mat-tab-header {
    border-bottom: none;
  }
}

https://angular-qmkyep.stackblitz.io/

堆棧閃電戰