AngularJS Material Design：md-tabs中不同标签的不同颜色答案

【问题标题】：AngularJS Material Design : Different colors for different tabs in md-tabsAngularJS Material Design：md-tabs中不同标签的不同颜色
【发布时间】：2015-05-30 05:01:21
【问题描述】：

有没有办法为md-tabs 中的不同选项卡设置不同的背景颜色？默认为无颜色，可以在tabs demo中看到

我尝试了<md-tabs background-color="green">，但它不起作用

【问题讨论】：

标签： angularjs tabs angular-material

【解决方案1】：

AngularJS 材料设计 (md) 选项卡，md-tabs 背景颜色是透明的，并使用主容器的背景颜色。尝试为 md-tabs 添加 CSS 类。

为整个 md 选项卡添加背景

md-tabs {
    background: red;
    border: 1px solid #e1e1e1; }

通过将 CSS 子元素添加到 md-tab 类，您可以看到不同选项卡的不同颜色。

 .md-tab:first-child{background: green; } 
 .md-tab:nth-child(2){background: pink; } 
 .md-tab:nth-child(3){background: blue; }

小提琴 https://jsfiddle.net/cxf3otz9/

codepen http://codepen.io/anon/pen/zGNEyw

【讨论】：

是的，它有效，但我想根据一些逻辑为不同的标签赋予不同的颜色。我们可以这样做吗？
@SaurabhVerma，你可以试试，但我更喜欢 CSS 是最好的解决方案.. 我认为你的问题得到了答案..
由于这是有角度的，您可以在每个 md 选项卡中使用 ng-class 或 ng-style。 <md-tab label='one' ng-class='{"green": isGreenTab(), "blue":isBlueTab()}'>...</md-tab> <md-tab label='two' ng-style='myStyleFunction()'>...</md-tab>

【解决方案2】：

在评估源代码后，我发现了一种方法来实现标签标题的动态内容格式。为此，请编写如下代码

<md-tabs>
    <md-tab>
        <md-tab-label>
            <span ng-class="......">
                Title
            </span>
        </md-tab-label>
        <md-tab-body>
        content
        </md-tab-body>
    </md-tab>
</md-tabs>

【讨论】：

更好的解决方案！