如何自定义类似于Angular材质选项卡的Angular Ui引导选项卡
[英]how to customize Angular Ui bootstrap tabs similar to angular material tabs
问题描述
我正在使用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 个解决方案
解决方案1
0 已采纳 2016-03-11 17:39:41
您有两个选择之一，但这两者都不是最佳实践，但是由于您要更改库样式，因此这是您的选择。
- 您可以下载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 JS如何在Bootstrap UI选项卡中插入自定义指令
[英]Angular JS How to insert custom Directives in the Bootstrap UI Tabs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.