如何自定义类似于角度材质选项卡的 Angular Ui 引导选项卡

how to customize Angular Ui bootstrap tabs similar to angular material tabs

本文关键字：选项 Angular Ui 自定义 类似于      更新时间：2023-09-26

我正在使用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>

但我的要求更像是角度材料标签请任何人帮助我如何在不使用角度材料的情况下对我的代码进行自定义。

您有两种选择之一，这两种选择都不是最好的做法，但由于您正在尝试更改库样式，因此这些是您的选项。

  1. 您可以下载UI-bootstrap css，自己托管并编辑它。
  2. 您可以将 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>

相关文章：