案例
<! DOCTYPE html >
< html lang ="en" ng-app ="myApp" >
< head >
< meta charset ="UTF-8" >
< title > Title </ title >
< link rel ="stylesheet" href ='node_modules/bootstrap/dist/css/bootstrap.css' >
< link rel ="stylesheet" href ='node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css' >
< script src ="node_modules/angular/angular.min.js" ></ script >
< script src ="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" ></ script >
< style type ="text/css" >
form.tab-form-demo .tab-pane {
margin : 20px 20px ;
}
</ style >
< script >
angular.module( ' myApp ' ,[ ' ui.bootstrap ' ])
.controller( ' TabsDemoCtrl ' , function ($scope, uibDateParser) {
$scope.tabs = [
{ title: ' Dynamic Title 1 ' , content: ' Dynamic content 1 ' },
{ title: ' Dynamic Title 2 ' , content: ' Dynamic content 2 ' , disabled: true }
];
$scope.alertMe = function () {
setTimeout( function () {
$window.alert( ' You\'ve selected the alert tab! ' );
});
};
$scope.model = {
name: ' Tabs '
};
});
</ script >
</ head >
< body >
< div ng-controller ="TabsDemoCtrl" >
< p > Select a tab by setting active binding to true: </ p >
< p >
< button type ="button" class ="btn btn-default btn-sm" ng-click ="active = 1" > Select second tab </ button >
< button type ="button" class ="btn btn-default btn-sm" ng-click ="active = 2" > Select third tab </ button >
</ p >
< p >
< button type ="button" class ="btn btn-default btn-sm" ng-click ="tabs[1].disabled = ! tabs[1].disabled" > Enable / Disable third tab </ button >
</ p >
< hr />
< uib-tabset active ="active" >
< uib-tab index ="0" heading ="Static title" > Static content </ uib-tab >
< uib-tab index ="$index + 1" ng-repeat ="tab in tabs" heading ="{{tab.title}}" disable ="tab.disabled" >
{{tab.content}}
</ uib-tab >
< uib-tab index ="3" select ="alertMe()" >
< uib-tab-heading >
< i class ="glyphicon glyphicon-bell" ></ i > Alert!
</ uib-tab-heading >
I've got an HTML heading, and a select callback. Pretty cool!
</ uib-tab >
</ uib-tabset >
< hr />
< uib-tabset active ="activePill" vertical ="true" type ="pills" >
< uib-tab index ="0" heading ="Vertical 1" > Vertical content 1 </ uib-tab >
< uib-tab index ="1" heading ="Vertical 2" > Vertical content 2 </ uib-tab >
</ uib-tabset >
< hr />
< uib-tabset active ="activeJustified" justified ="true" >
< uib-tab index ="0" heading ="Justified" > Justified content </ uib-tab >
< uib-tab index ="1" heading ="SJ" > Short Labeled Justified content </ uib-tab >
< uib-tab index ="2" heading ="Long Justified" > Long Labeled Justified content </ uib-tab >
</ uib-tabset >
< hr />
Tabbed pills with CSS classes
< uib-tabset type ="pills" >
< uib-tab heading ="Default Size" > Tab 1 content </ uib-tab >
< uib-tab heading ="Small Button" classes ="btn-sm" > Tab 2 content </ uib-tab >
</ uib-tabset >
< hr />
Tabs using nested forms:
< form name ="outerForm" class ="tab-form-demo" >
< uib-tabset active ="activeForm" >
< uib-tab index ="0" heading ="Form Tab" >
< ng-form name ="nestedForm" >
< div class ="form-group" >
< label > Name </ label >
< input type ="text" class ="form-control" required ng-model ="model.name" />
</ div >
</ ng-form >
</ uib-tab >
< uib-tab index ="1" heading ="Tab One" >
Some Tab Content
</ uib-tab >
< uib-tab index ="2" heading ="Tab Two" >
More Tab Content
</ uib-tab >
</ uib-tabset >
</ form >
Model:
< pre > {{ model | json }} </ pre >
Nested Form:
< pre > {{ outerForm.nestedForm | json }} </ pre >
</ div >
</ body >
</ html >
效果
uib-tabset 配置
active (Default: Index of first tab ) - 选项卡索引。设置这个现有选项卡的标签索引。
< button type ="button" class ="btn btn-default btn-sm" ng-click ="uibTabDemo = 1" > 点击后切换到two </ button >
< uib-tabset active ="uibTabDemo" >
< uib-tab index ="0" heading ="one" >
one
</ uib-tab >
< uib-tab index ="1" heading ="two" >
two
</ uib-tab >
</ uib-tabset >
justified $ (Default: false ) -标签填补容器的宽度受否一致。
< uib-tabset active ="activeJustified" justified ="true" >
< uib-tab index ="0" heading ="Justified" > Justified content </ uib-tab >
< uib-tab index ="1" heading ="SJ" > Short Labeled Justified content </ uib-tab >
< uib-tab index ="2" heading ="Long Justified" > Long Labeled Justified content </ uib-tab >
< uib-tab index ="3" heading ="Long " > Long Labeled content </ uib-tab >
< uib-tab index ="4" heading ="Justified" > Justified content </ uib-tab >
</ uib-tabset >
< uib-tabset active ="activeJustified" justified ="false" >
< uib-tab index ="0" heading ="Justified" > Justified content </ uib-tab >
< uib-tab index ="1" heading ="SJ" > Short Labeled Justified content </ uib-tab >
< uib-tab index ="2" heading ="Long Justified" > Long Labeled Justified content </ uib-tab >
< uib-tab index ="3" heading ="Long " > Long Labeled content </ uib-tab >
< uib-tab index ="4" heading ="Justified" > Justified content </ uib-tab >
</ uib-tabset >
template-url (Default: uib/template/tabs/tabset.html ) - 一个URL代表组件使用的模板位置。
type (Defaults: tabs ) - 导航类型。可能的值是“tabs”和“ pills ”。以下是pills类型
< uib-tabset type ="pills" >
< uib-tab heading ="Default Size" > Tab 1 content </ uib-tab >
< uib-tab heading ="Small Button" classes ="btn-sm" > Tab 2 content </ uib-tab >
</ uib-tabset >
vertical $ (Default: false ) - 标签是否垂直堆叠显示（最好设置type为pills，因为ui-bootstrap并没有对对垂直显示做样式调整）。
< uib-tabset active ="activePill" vertical ="true" type ="pills" >
< uib-tab index ="0" heading ="Vertical 1" > Vertical content 1 </ uib-tab >
< uib-tab index ="1" heading ="Vertical 2" > Vertical content 2 </ uib-tab >
</ uib-tabset >
uib-tab 配置
classes $ - 一个可选的字符串，内容为空格分隔的CSS类.这个类是作用到标签上的，而不是内容上的
Tabbed pills with CSS classes
< uib-tabset type ="pills" >
< uib-tab heading ="Default Size" > Tab 1 content </ uib-tab >
< uib-tab heading ="Small Button" classes ="btn-sm" > Tab 2 content </ uib-tab >
</ uib-tabset >
deselect() $ - 当标签被激活时，一个可选的表达式
disable $ (Default: false ) - 禁用选项卡
heading - 标题文本
< uib-tabset >
< uib-tab index ="0" heading ="one" >
one
</ uib-tab >
< uib-tab index ="1" heading ="two" >
two
</ uib-tab >
</ uib-tabset >
index - 标签索引。必须是唯一的数字或字符串。
select() $ - 一个可选的表达式，当标签被激活时触发。
$scope.tabs = [
{ title: 'Dynamic Title 1', content:'Dynamic content 1' },
{ title: 'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
];
$scope.alertMe = function () {
console.log( 'demo' )
};
template-url (Default: uib/template/tabs/tab.html ) - 一个URL的位置代表使用选项卡标题的模板。
Tabset heading
如果使用uib-tabset字符串标题无法满足需求,您也可以使用一个uib-tab-heading元素。也可以使用HTML。
< uib-tabset active ="active" >
< uib-tab index ="0" heading ="Static title" > Static content </ uib-tab >
< uib-tab index ="1" select ="alertMe()" >
< uib-tab-heading >
< i class ="glyphicon glyphicon-bell" ></ i > Alert!
</ uib-tab-heading >
I've got an HTML heading, and a select callback. Pretty cool!
</ uib-tab >
</ uib-tabset >
已知的问题
要在标签中使用可点击元素（例如a标签），你必须改为使用div元素，而不是a元素，并设置相应的样式。
查看更多关于angular-ui-bootstrap插件API - Tabs的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222848