Home > Developer > Web Develop
Original address: http://www.cnblogs.com/pilixiami/p/5635137.html
The tabs control uses the Uib-tabset directive and the Uib-tab directive, and the effect is this:
<!DOCTYPE HTML><HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script> <Script>Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Tabsdemoctrl', function($scope, $window) {$scope. Tabs=[{title:'Label Page A', Content:'contents of tab a'}, {title:'Label Page B', Content:'contents of tab B', Disabled:true } ]; $scope. AlertMe= function() {setTimeout (function() {$window. Alert ('clicked!'); }); }; }); </Script></Head><Body> <DivNg-controller= "Tabsdemoctrl"> <Uib-tabsetActive= "Active"type= "Tabs"> <Uib-tabIndex= "0"Heading= "Label Page 1">Content 1</Uib-tab> <Uib-tabIndex= "$index + 1"ng-repeat= "tab in Tabs"Heading= "{{tab.title}}"Active= "Tab.active"Disable= "tab.disabled">{{tab.content}}</Uib-tab> <Uib-tabIndex= "3"Select= "alertMe ()"> <uib-tab-heading> <Iclass= "Glyphicon Glyphicon-bell"></I>alert! </uib-tab-heading>Content Section</Uib-tab> </Uib-tabset> </Div></Body></HTML>
The properties available with Uib-tabset are:
Property name |
Default value |
Note |
Active |
Index of the first tab page |
Index of the Currently active tab page |
Justified |
False |
Whether to distribute widths of individual tabs in the parent container |
Template-url |
Uib/template/tabs/tabset.html |
|
Type |
Tabs |
The type of the tab page. Can be set to tabs or pills |
Vertical |
False |
Whether to display vertically |
The properties available with Uib-tab are:
Property name |
Default value |
Note |
Classes |
You can add a space-delimited class name |
|
Deselect |
The function that triggers when the label page board is unchecked (activating other tabs). The incoming event object parameter $event is supported, and the operation can be canceled with $event.preventdefault (). |
|
Disable |
False |
Whether to disable |
Heading |
Text for the title of the tab page |
|
Index |
The index of the tab page. Each index must be unique |
|
Select |
The function that is triggered when the tab page is selected. The incoming event object parameter $event is supported, and the operation can be canceled with $event.preventdefault (). |
|
Template-url |
Uib/template/tabs/tab.html |
If the title of the panel is simple text, it is sufficient to use the heading property. If you have complex content, such as icons, you can use uib-tab-heading. This is the same as the according control.
Angularjs UI Component Ui-bootstrap Share (vi)--tabs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
