Home > Developer > Web Develop
The tabs control uses the Uib-tabset directive and the Uib-tab directive, and the effect is this:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <Linkhref= "/content/bootstrap.css"rel= "stylesheet" />6 <title></title>7 8 <Scriptsrc= "/scripts/angular.js"></Script>9 <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script>Ten <Script> One A Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Tabsdemoctrl', function($scope, $window) { - $scope. Tabs= [ - {title:'Label Page A', Content:'contents of tab a' }, the {title:'Label Page B', Content:'contents of tab B', Disabled:true } - ]; - - $scope. AlertMe= function () { + SetTimeout (function () { - $window. Alert ('clicked!'); + }); A }; at }); - </Script> - </Head> - <Body> - <DivNg-controller= "Tabsdemoctrl"> - <Uib-tabsetActive= "Active"type= "Tabs"> in <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"> to {{tab.content}} + </Uib-tab> - <Uib-tabIndex= "3"Select= "alertMe ()"> the <uib-tab-heading> * <Iclass= "Glyphicon Glyphicon-bell"></I>alert! $ </uib-tab-heading>Panax Notoginseng Content Section - </Uib-tab> the </Uib-tabset> + </Div> A </Body> the </HTML>View Code
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
