Skip to content

Latest commit

 

History

History
70 lines (51 loc) · 2.09 KB

readme.md

File metadata and controls

70 lines (51 loc) · 2.09 KB

AngularJS version of the tabs directive.

uib-tabset settings

  • active (Default: Index of first tab) - Active index of tab.

  • 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.

uib-tab settings

  • active $ (Default: false) - Whether tab is currently selected.

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

  • deselect() $ - An optional expression called when tab is deactivated.

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

  • heading - Heading text.

  • index - Tab index. Must be unique.

  • select() $ - An optional expression called when tab is activated.

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

Tabset 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.

Known issues

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.