Question

我正在使用Angular Ui Bootrstrap。

<html ng-app="ui.bootstrap.demo">
<head>
  
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script>
  angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
 angular.module('ui.bootstrap.demo').controller('tranCntrl', ['$scope', function ($scope){
   
}]);
  </script>
  
  
</head>
<body ng-controller="tranCntrl">
  
<div class="panel-body">
<uib-tabset>
       <uib-tab>
             <uib-tab-heading><b> Cpu uilization </b></uib-tab-heading>
       </uib-tab>
       <uib-tab>
             <uib-tab-heading><b> memory utilization </b></uib-tab-heading>
       </uib-tab>
       <uib-tab>
             <uib-tab-heading><b> I/O waits </b></uib-tab-heading>
       </uib-tab>
</uib-tabset>
</div>

</body>
</html>

但我的要求是more like angular material tabs 请任何人协助我如何使用角度材料进行代码定制。

Answer 1

您有两个选项之一，两者都不是最佳实践，但由于您正在尝试更改库样式，因此这些是您的选择。

您可以下载UI-bootstrap css，自己托管并编辑它。
您是否在文件中添加了css，以使用!important标记覆盖该样式。（这不是很好，但如果你只是覆盖了一个特定于那个库的类，那就好了）

下面我展示了一个2号的例子。

<html ng-app="ui.bootstrap.demo">
<head>
  
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script>
  angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
 angular.module('ui.bootstrap.demo').controller('tranCntrl', ['$scope', function ($scope){
   
}]);
  </script>

  <style>
    .nav-tabs, .nav-tabs>li>a {
       border: 0 !important;
    }
    .uib-tab.active {
       border-bottom: 1px solid #ddd;
    }
    
  </style> 
</head>
<body ng-controller="tranCntrl">
  
<div class="panel-body">
<uib-tabset>
       <uib-tab>
             <uib-tab-heading><b> Cpu uilization </b></uib-tab-heading>
       </uib-tab>
       <uib-tab>
             <uib-tab-heading><b> memory utilization </b></uib-tab-heading>
       </uib-tab>
       <uib-tab>
             <uib-tab-heading><b> I/O waits </b></uib-tab-heading>
       </uib-tab>
</uib-tabset>
</div>

</body>
</html>

如何自定义Angular Ui bootstrap选项卡，类似于角度材质选项卡

1 个答案: