如何在角度js中更改uib选项卡的颜色

i have my business requirement that i want to change the colors of uib tab. I have dynamic tabs so whenever i add new tab i want the tabs to have its own color. I have code to generate random colors while adding tab but do not know how to change the colors of tab.

我有我的业务要求,我想更改uib选项卡的颜色。我有动态标签,所以每当我添加新标签时,我希望标签有自己的颜色。我有代码生成随机颜色,同时添加选项卡,但不知道如何更改选项卡的颜色。

My code is:

我的代码是:

<uib-tabset active="active">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" disable="tab.disabled">
    <uib-tab-heading>
        <b>{{tab.title}}</b>            
    </uib-tab-heading>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Test A</th>
        </tr>
        </thead>
        <tbody >
        <tr ng-repeat="content in contents ">
            <td>testing value</td>
            <td>
        </tr>
        </tbody>
    </table>
</uib-tab>
</uib-tabset>

Adding Tab

$scope.addTab = function (title, view) {
  view = view || title + " Content View";
  $scope.tabs.push({ title: title, content: view, disabled: false});    
};

If it is not possible with uib tab then any other solution with angular js please.

如果使用uib tab不可能,那么请使用角度js的任何其他解决方案。

Note: I do not want to use tabset

注意:我不想使用tabset

2 个解决方案

#1

Angular UI Bootstrap creates unordered list for the tabs. Each li element represents tab and it contains anchor element, which represents tab-headings. So, You can change the anchor element style properties such as color, background, etc., If it is dynamic then use ng-class to change the color of a tab.

Angular UI Bootstrap为选项卡创建无序列表。每个li元素表示制表符,它包含锚元素,表示制表符标题。因此,您可以更改锚元素样式属性,如颜色,背景等。如果它是动态的,则使用ng-class更改选项卡的颜色。

For example : Modifying color and background color of active tab:

例如:修改活动标签的颜色和背景颜色:

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
   color : #686868;
   background-color : #ccc;
}

If it is dynamic then create a custom class(tab-style) and assign it to like the following

如果它是动态的,则创建一个自定义类(制表符样式)并将其指定为如下所示

HTML:

<ui-tabset class="tab-style">
   //template coding part
</ui-tabset>

SCSS:

.tab-style{
   .nav-tabs li a{
      color : //required color,
      background-color : //required color
   }
   .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs >  li.active > a:hover{
      color : #686868;
      background-color : #ccc;
   }
}

If you want add separate color for each tab then add new property to $scope.tabs for each tab object say color and add that property to the tab using ng-class.

如果要为每个选项卡添加单独的颜色,则为每个选项卡对象添加新属性到$ scope.tabs,然后使用ng-class将该属性添加到选项卡。

Add Tab: Example

添加标签:示例

$scope.addTab = function (title, view) {
   view = view || title + " Content View";
   $scope.tabs.push({ title: title, content: view, disabled: false,  color : 'red'});
};

In controller, you change the color property value based on requirement

在控制器中,您可以根据要求更改颜色属性值

HTML:

<uib-tabset active="active" class="custom-tab-style">
  <uib-tab index="$index + 1" ng-repeat="tab in tabs" disable="tab.disabled" ng-class="'tab' + tab.color">
    <uib-tab-heading><b>{{tab.title}}</b></uib-tab-heading>

    //template code here
</uib-tab>

SCSS:

custom-tab-style{
  .tab-red{
     a{
        color : red;
        //Here you can modify css styles for tab link
      }
  }
}

#2

You can do this really easily by adding an object to your tabs.push statement

通过向tabs.push语句添加对象,您可以非常轻松地完成此操作

style:"{'background-color':'green'}" // replace "green" with your generated color

then in the usb-tabs directive add a ng-style

然后在usb-tabs指令中添加一个ng-style

ng-style="{{tab.style}}"

You can see this in this plunker

你可以在这个plunker中看到这个