2017-08-25 2 views
0

これはmd-tab-groupではなく、複数のルートを使用できるmd-tab-nav-barです。今、それは(私は公式ドキュメントごとにカスタマイズした)原色にデフォルト設定されますが、私はそれがアクセントカラーを表示したいのよう角材 - md-tab-nav-barを使用してmd-tab-linkの色を変更する方法は?

<nav md-tab-nav-bar> 
    <a md-tab-link style="border-bottom-color: blue" 
    *ngFor="let link of navLinks" 
    [routerLink]="link.endpoint" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    {{link.label}} 
    </a> 
</nav> 

:ここでは基本的な設定です。

私はちょうど色を変更しようとしています。最新の角度4で正しい方法を行う方法に関するドキュメントはなく、ハックを探していません。定期的なタブに関する多くの質問がありますが、これについてはありません。

更新:回避策として は/ハック私はちょうどにコードを変更:

<nav md-tab-nav-bar> 
    <a md-tab-link 
    *ngFor="let link of navLinks" 
    [routerLink]="link.endpoint" 
    routerLinkActive = "active"> 
    {{link.label}} 
</a> 
</nav> 

そしてSCSSでやった:

.active { 
    border-bottom: solid .2em #ffce00; 
} 

しかし、再び、私は本当にやりたいだろうし正しい方法。

+0

私は角材料について多くを知らないが、「正しい方法は、」テンプレートにインラインスタイルを使用するのは本当にありますか?それは奇妙に思える。あなたの回避策/ハックはよりクリーンで、より保守的であるように見えます。あなたが何らかの説明を書かなかったなら、回避策が正しい方法であり、他のコードはそうではないと思ったでしょう! – diopside

+0

もっと便利になるには.... このコンポーネントのコードはhttps://github.com/angular/material2/blob/master/src/lib/tabs/tab-nav-barでご覧ください。 /tab-nav-bar.ts(84行目から関連性の高いもの)背景色を選択して波紋効果を無効にする方法は、唯一のオプションです。私は他のすべてがCSS経由で行われていると思います。 – diopside

+0

ええ、それは実装されていないか、まったくドキュメンテーションがないだけのものです。私は自分のような人が(タブではできない)ルータのアウトレットを望んでいることを知っていたと確信しているので、最新の追加のすべてが終わった後で、ドキュメントに記載されています。私はこの質問を残しておきます。それが出てきたら、誰かが答えて私たちと分かち合うことができます。 – epiphanatic

答えて

0

最新のマスタービルド(beta.9で予定)は、colorbackgroundColorオプションをサポートしています。 colorはアンダーラインの色を変更し、backgroundColorはタブグループまたはナビゲーションバーの背景を変更します。

enter image description here

関連する問題