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

Question

I am using 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.

Answer 1

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.

You could download the UI-bootstrap css, host it yourself and edit it.
You you add css to your file to overwrite the style using the !important tag. (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.

 <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>

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

Question

1 answers

solution1
0 ACCPTED 2016-03-11 17:39:41

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

Question

1 answers

solution1 0 ACCPTED 2016-03-11 17:39:41

solution1
0 ACCPTED 2016-03-11 17:39:41