How to use UI Bootstrap Tabs in Angular
Posted By : Shivam Gupta | 27-Jun-2017
AngularJs provides uib-tabset and uib-tab directives (UI Bootstrap Tab).These directives has some setting attributes.
uib-tabset setting attributes
active:By default first index tab is active.Setting this to an existing tab index will make that tab active.
justified:By default justified is false and tabs fill the container and have a uniform width.
type:By default type is tabs and possible value of type are tabs and pills
vertical:By default vertical value is false and tabs can vertically stacked using this property.
Uib-tab setting attributes
classes: For define css classes.
deselect(): It is called when tab is deactivated.
disable:Make tab disable if disable is true otherwise it is clickable.
heading:Heading text.
Index:Tab index.this must be unique number or string.
selecte(): It is called when tab is activated.
Note:you can also use an uib-tab-heading element inside a tabset which will be used as the tabset’s header.
After using above setting of uib-tabset and uib-tab directives then tabs will visible like this
Example of UI Bootstrap Tabs
Select a tab by setting active binding to true:
Static content {{tab.content}}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shivam Gupta
Shivam is a bright java developer with experience in building enterprise applications using Flex and Java. He is also well versed with Groovy and Grails development.