ember-bootstrap

API Docs 0.11.3.33c7ec07

Components.Tab Class

public
Uses
Extends Ember.Component
Defined in: addon/components/bs-tab.js:8

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 Components.TabPane components that hold the tab content. The tab navigation is automatically generated from the tab panes' title property:

{{#bs-tab}}
  {{#bs-tab-pane title="Tab 1"}}
    <p>...</p>
  {{/bs-tab-pane}}
  {{#bs-tab-pane title="Tab 2"}}
    <p>...</p>
  {{/bs-tab-pane}}
{{/bs-tab}}

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:

{{#bs-tab}}
   {{#bs-tab-pane title="Tab 1"}}
     <p>...</p>
   {{/bs-tab-pane}}
   {{#bs-tab-pane title="Tab 2"}}
     <p>...</p>
   {{/bs-tab-pane}}
   {{#bs-tab-pane title="Tab 3" groupTitle="Dropdown"}}
     <p>...</p>
   {{/bs-tab-pane}}
   {{#bs-tab-pane title="Tab 4" groupTitle="Dropdown"}}
     <p>...</p>
   {{/bs-tab-pane}}
{{/bs-tab}}

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:

{{#bs-tab customTabs=true as |activeId select|}}
   {{#bs-nav type="tabs"}}
       {{#bs-nav-item active=(bs-eq activeId "pane1")}}<a href="#pane1" role="tab" {{action select "pane1"}}>Tab 1</a>{{/bs-nav-item}}
       {{#bs-nav-item active=(bs-eq activeId "pane2")}}<a href="#pane1" role="tab" {{action select "pane2"}}>Tab 2 <span class="badge">{{badge}}</span></a>{{/bs-nav-item}}
   {{/bs-nav}}

   <div class="tab-content">
   {{#bs-tab-pane elementId="pane1" title="Tab 1"}}
       <p>...</p>
   {{/bs-tab-pane}}
   {{#bs-tab-pane elementId="pane2" title="Tab 2"}}
       <p>...</p>
   {{/bs-tab-pane}}
   </div>
{{/bs-tab}}

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>
  {{#bs-nav type="tabs"}}
    {{#bs-nav-item}}{{#link-to "tabs.index"}}Tab 1{{/link-to}}{{/bs-nav-item}}
    {{#bs-nav-item}}{{#link-to "tabs.other"}}Tab 2{{/link-to}}{{/bs-nav-item}}
  {{/bs-nav}}
  {{outlet}}
</div>
Show:

Methods

registerChild

public

Inherited from Mixins.ComponentParent: addon/mixins/component-parent.js:25

Register a component as a child of this parent

Parameters:

  • child Object

removeChild

public

Inherited from Mixins.ComponentParent: addon/mixins/component-parent.js:38

Remove the child component from this parent component

Parameters:

  • child Object

Properties

activeId string

public

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

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

{{#bs-tab activeId="pane2"}}
                      {{#bs-tab-pane id="pane1" title="Tab 1"}}
                         ...
                      {{/bs-tab-pane}}
                      {{#bs-tab-pane id="pane1" title="Tab 1"}}
                        ...
                      {{/bs-tab-pane}}
                    {{/bs-tab}}

childPanes array

private

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

All TabPane child components

children array

protected

Inherited from Mixins.ComponentParent: addon/mixins/component-parent.js:12

Array of registered child components

customTabs boolean

public

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

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.

Default: false

fade boolean

public

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

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

Default: true

fadeDuration integer

public

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

The duration of the fade animation

Default: 150

navItems array

private

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

Array of objects that define the tab structure

type String

public

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

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

Default: 'tabs'

Events

action

public

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

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

Classes