AngularJS version of the tabs directive.

• active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active.

• justified $ (Default: false) - Whether tabs fill the container and have a consistent width.

  • template-url (Default: uib/template/tabs/tabset.html) - A URL representing the location of a template to use for the main component.

• type (Defaults: tabs) - Navigation type. Possible values are 'tabs' and 'pills'.

• vertical $ (Default: false) - Whether tabs appear vertically stacked.

• classes $ - An optional string of space-separated CSS classes.

• deselect() $ - An optional expression called when tab is deactivated. Supports $event and $selectedIndex in template for expression. You may call $event.preventDefault() in this event handler to prevent a tab change from occurring. The $selectedIndex can be used to determine which tab was attempted to be opened.

• disable $ (Default: false) - Whether tab is clickable and can be activated.

• heading - Heading text.

• index - Tab index. Must be unique number or string.

• select() $ - An optional expression called when tab is activated. Supports $event in template for expression.

• template-url (Default: uib/template/tabs/tab.html) - A URL representing the location of a template to use for the tab heading.

Instead of the heading attribute on the uib-tabset, you can use an uib-tab-heading element inside a tabset that will be used as the tabset's header. There you can use HTML as well.

To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.