简体   繁体   English

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

[英]how to customize Angular Ui bootstrap tabs similar to angular material tabs

I am using Angular Ui Bootrstrap. 我正在使用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> 

but my requirement is more like angular material tabs please any one assist me in how can i do the customization for my code with out using angular material. 但是我的要求更像是角材料选项卡,请任何人协助我如何在不使用角材料的情况下为我的代码进行自定义。

You have one of two options, both aren't the best of practices but since you are trying to change a library styling these are your options. 您有两个选择之一,但这两者都不是最佳实践,但是由于您要更改库样式,因此这是您的选择。

  1. You could download the UI-bootstrap css, host it yourself and edit it. 您可以下载UI-bootstrap CSS,自己托管并进行编辑。
  2. You you add css to your file to overwrite the style using the !important tag. 您将css添加到文件中以使用!important标记覆盖样式。 (this is not great but if you are only overwriting a few classes that are specific to that one library its ok) (这不是很好,但是如果您只覆盖几个特定于该库的类就可以了)

Below i have showed an example of what number 2 would look like. 下面我展示了一个数字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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM