web-dev-qa-db-ja.com

アクティブなタブのインクバーの色を変更するにはどうすればよいですか？

アクティブなタブのインクバーの色を変更することはできますか？

デフォルトでは、インクバーは青色です。例については here を参照してください。

SCSSでこれを試しましたが、機能しません。

.mat-tab-label-container{
  .mat-tab-list{
    .mat-ink-bar {
      background-color: green
    }
  }
}

.mat-tab-label-active{
 color: green 
}

誰でも助けてください

angularangular-materialangular-material2
6
Mark

Image これはあなたが達成したいものに似ているかもしれません

このリンク（ :: ng-deepおよび！importantなしでmat-tabのスタイルを設定することはできません ）を参照し、それが役立つ場合は賛成票を投じてください。


あなたの質問に答える

Selector specificityを使用して、スタイルをルートスタイル/src/styles.cssに配置する必要があります（注：コンポーネントに配置しないでくださいstyleUrls作業）

インクバーをスタイルする

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
}


アイテムを覆う下線から楕円形にインクバーを変更する

このコードを試して、アイテムをカバーする楕円形にすることができます。

/* label style */
.mat-tab-label{
  background: #e7e7e7;
  color:  black;
  min-width: 60px!important;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: #e7e7e7;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
   background: rgba(149, 165, 166,0.3);
    height: 35px;
    border-radius: 100px;
    margin-bottom: 5px;
}

こちらのライブサンプルをご覧ください。

https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

お役に立てれば。

17
davecar21