Using UI Bootstrap Tabs in AngularJS

AngularJS UI-Bootstrap Tab is Native AngularJS (Angular) directives for Bootstrap.

uib-tabset settings

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

uib-tab settings

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

Tabset heading

Instead of using the heading attribute on the uib-tabset, you can also use an uib-tab-heading element inside a tabset which will be used as the tabset’s header. Here you can also use HTML.

Close