Components.Tab public

Tab component for dynamic tab functionality that mimics the behaviour of Bootstrap's tab.js plugin, see http://getbootstrap.com/javascript/#tabs

Usage

Just nest any number of yielded Components.TabPane components that hold the tab content. The tab navigation is automatically generated from the tab panes' title property:

<BsTab as |tab|>
  <tab.pane @title="Tab 1">
    <p> ... </p>
  </tab.pane>
  <tab.pane @title="Tab 2">
    <p> ... </p>
  </tab.pane>
</BsTab>

Groupable (dropdown) tabs

Bootstrap's support for dropdown menus as tab navigation is mimiced by the use of the groupTitle property. All panes with the same groupTitle will be put inside the menu of a Components.Dropdown component with groupTitle being the dropdown's title:

<BsTab as |tab|>
  <tab.pane @title="Tab 1">
    <p> ... </p>
  </tab.pane>
  <tab.pane @title="Tab 2">
    <p> ... </p>
  </tab.pane>
  <tab.pane @title="Tab 3" @groupTitle="Dropdown">
    <p> ... </p>
  </tab.pane>
  <tab.pane @title="Tab 4" @groupTitle="Dropdown">
    <p> ... </p>
  </tab.pane>
</BsTab>

Custom tabs

When having the tab pane's title as the tab navigation title is not sufficient, for example because you want to integrate some other dynamic content, maybe even other components in the tab navigation item, then you have to setup your navigation by yourself.

Set customTabs to true to deactivate the automatic tab navigation generation. Then setup your navigation, probably using a Components.Nav component. The tab component yields the activeId property as well as its select action, which you would have to use to manually set the active state of the navigation items and to trigger the selection of the different tab panes, using their ids:

<BsTab @customTabs={{true}} as |tab|>
  <BsNav @type="tabs" as |nav|>
    <nav.item @active={{bs-eq Tab.activeId "pane1"}}><a href="#pane1" role="tab" onclick={{action Tab.select "pane1"}}>Tab 1</a></nav.item>
    <nav.item @active={{bs-eq Tab.activeId "pane2"}}><a href="#pane2" role="tab" onclick={{action Tab.select "pane2"}}>Tab 2 <span class="badge">{{badge}}</span></a></nav.item>
  </BsNav>
  <div class="tab-content">
    <tab.pane @id="pane1" @title="Tab 1">
      <p> ... </p>
    </tab.pane>
    <tab.pane @id="pane2" @title="Tab 2">
      <p> ... </p>
    </tab.pane>
  </div>
</BsTab>

Note that the bs-eq helper used in the example above is a private helper, which is not guaranteed to be available for the future. Better use the corresponding eq helper of the ember-truth-helpers addon for example!

Routable tabs

The tab component purpose is to have panes of content, that are all in DOM at the same time and that are activated and deactivated dynamically, just as the original Bootstrap implementation.

If you want to have the content delivered through individual sub routes, just use the Components.Nav component and an {{outlet}} that show the nested routes' content:

<div>
  <BsNav @type="tabs" as |nav|>
    <nav.item>
      <nav.linkTo @route="tabs.index">Tab 1</nav.linkTo>
    </nav.item>
    <nav.item>
      <nav.linkTo @route="tabs.other">Tab 3</nav.linkTo>
    </nav.item>
  </BsNav>
</div>

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.

registerChild

public
Register a component as a child of this parent

Parameters:

  • child Object

removeChild

public
Remove the child component from this parent component

Parameters:

  • child Object

activeId string public

The id (id) of the active TabPane. By default the first tab will be active, but this can be changed by setting this property

When the selection is changed by user interaction this property will not update by using two-way bindings in order to follow DDAU best practices. If you want to react to such changes, subscribe to the onChange action

childPanes array private

All TabPane child components

children array protected

Array of registered child components

customTabs boolean public

Default: false

Defined in addon/components/bs-tab.js:143

By default the tabs will be automatically generated using the available TabPane components. If set to true, you can deactivate this and setup the tabs manually. See the example above.

fade boolean public

Default: true

Defined in addon/components/bs-tab.js:187

Set to false to disable the fade animation when switching tabs.

fadeDuration integer public

Default: 150

Defined in addon/components/bs-tab.js:198

The duration of the fade animation

isActiveId unknown private

navComponent {String} private

navItems array private

Array of objects that define the tab structure

paneComponent {String} private

type String public

Default: 'tabs'

Defined in addon/components/bs-tab.js:120

Type of nav, either "pills" or "tabs"

onChange

public

This action is called when switching the active tab, with the new and previous pane id

You can return false to prevent changing the active tab automatically, and do that in your action by setting activeId.

Classes