Angularjs UI Component Ui-bootstrap Share (vi)--tabs

Source: Internet
Author: User

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= "">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= ""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



Index of the first tab page

Index of the Currently active tab page



Whether to distribute widths of individual tabs in the parent container





The type of the tab page. Can be set to tabs or pills



Whether to display vertically

The properties available with Uib-tab are:

Property name

Default value



You can add a space-delimited class name


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 ().



Whether to disable


Text for the title of the tab page


The index of the tab page. Each index must be unique


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 ().



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.