Angular Material - 如何使用md-tab-nav-bar更改md-tab-link顏色？

請注意，這不是用於md-tab-group，而是可以使用多個路由的md-tab-nav-bar。以下是基本設置：Angular Material - 如何使用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>

截至目前，它會默認爲原色（我已經定製按官方文檔），但我想它顯示的強調色。

我只是想改變顏色，沒有關於如何在最新的Angular 4中使用正確方法的文檔，而且我也沒有尋找黑客。關於常規選項卡有很多SO問題，但不適用於此。

更新：作爲一種解決方法/黑客我只是改變了代碼：

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

但同樣，我真的很想做的正確的方式。

來源

2017-08-25 epiphanatic

我不知道很多關於角材料，但它是「正確的方式」真的是在模板中使用內聯樣式？這似乎很奇怪。您的解決方法/破解看起來更清潔，更易於維護。如果你沒有寫任何解釋，我會認爲解決方法是正確的方法，而其他代碼不是！ – diopside

雖然......更有幫助，但是...... 如果您在此處查看該組件的代碼：https：//github.com/angular/material2/blob/master/src/lib/tabs/tab-nav-bar /tab-nav-bar.ts（從第84行開始是相關的）看起來他們內置的唯一選項是選擇背景顏色並禁用連鎖效果。我會假設一切都是通過CSS完成的。 – diopside

是的，它可能只是其中之一，或者它沒有被實現或者沒有任何文檔。畢竟這是最新的一個新增功能，他們只是在文檔中提到它，因爲我確信他們知道像我這樣的人會想要一個路由器插座（這不能用標籤來完成）。我會留下這個問題，所以當它出來時，有人可以回答並與我們分享，或者如果我在此期間找到答案，我會回答 – epiphanatic

最新的主版本（即將上市的beta.9）支持color和backgroundColor選項。 color將更改下劃線的顏色，並且backgroundColor會更改制表符組或導航欄背景。

來源

2017-08-25 14:02:36

Angular Material - 如何使用md-tab-nav-bar更改md-tab-link顏色？

回答

相關問題