如何自定義類似於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.