Tabs
案例
DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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 tabbutton>
<button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tabbutton>
p>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tabbutton>
p>
<hr />
<uib-tabset active="active">
<uib-tab index="0" heading="Static title">Static contentuib-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 1uib-tab>
<uib-tab index="1" heading="Vertical 2">Vertical content 2uib-tab>
uib-tabset>
<hr />
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="0" heading="Justified">Justified contentuib-tab>
<uib-tab index="1" heading="SJ">Short Labeled Justified contentuib-tab>
<uib-tab index="2" heading="Long Justified">Long Labeled Justified contentuib-tab>
uib-tabset>
<hr />
Tabbed pills with CSS classes
<uib-tabset type="pills">
<uib-tab heading="Default Size">Tab 1 contentuib-tab>
<uib-tab heading="Small Button" classes="btn-sm">Tab 2 contentuib-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>Namelabel>
<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">点击后切换到twobutton> <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 contentuib-tab> <uib-tab index="1" heading="SJ">Short Labeled Justified contentuib-tab> <uib-tab index="2" heading="Long Justified">Long Labeled Justified contentuib-tab> <uib-tab index="3" heading="Long ">Long Labeled contentuib-tab> <uib-tab index="4" heading="Justified">Justified contentuib-tab> uib-tabset>
<uib-tabset active="activeJustified" justified="false"> <uib-tab index="0" heading="Justified">Justified contentuib-tab> <uib-tab index="1" heading="SJ">Short Labeled Justified contentuib-tab> <uib-tab index="2" heading="Long Justified">Long Labeled Justified contentuib-tab> <uib-tab index="3" heading="Long ">Long Labeled contentuib-tab> <uib-tab index="4" heading="Justified">Justified contentuib-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 contentuib-tab> <uib-tab heading="Small Button" classes="btn-sm">Tab 2 contentuib-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 1uib-tab> <uib-tab index="1" heading="Vertical 2">Vertical content 2uib-tab> uib-tabset>
uib-tab 配置
-
classes$ - 一个可选的字符串，内容为空格分隔的CSS类.这个类是作用到标签上的，而不是内容上的Tabbed pills with CSS classes <uib-tabset type="pills"> <uib-tab heading="Default Size">Tab 1 contentuib-tab> <uib-tab heading="Small Button" classes="btn-sm">Tab 2 contentuib-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 contentuib-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元素，并设置相应的样式。