Ember-imdt-tabs NPM

Ember-imdt-tabs

This is an tab addon for Ember. These tabs are components, so you can add them on your application by installing the addon and calling for the component.

Installation

git clone this repository
npm install
bower install

Usage

All you need to do in order for the addon to display something is add the handlebars to the desired template, like this:

Tabs with text on block

<!-- app/templates/application.hbs-->

{{#ember-imdt-tab-panel activeTabName="tab12"}}
    {{#ember-imdt-tab-pane label="Tab One" name="tab11"}}Tab content 1{{/ember-imdt-tab-pane}}
    {{#ember-imdt-tab-pane label="Tab Two" name="tab12"}}Tab content 2{{/ember-imdt-tab-pane}}
    {{#ember-imdt-tab-pane label="Tab Three" name="tab13"}}Tab Content 3{{/ember-imdt-tab-pane}}
{{/ember-imdt-tab-panel}}

Tabs with templates on block

<!-- app/templates/application.hbs-->

{{#ember-imdt-tab-panel activeTabName="tab12"}}
    {{#ember-imdt-tab-pane label="Tab One" name="tab11"}}
      {{render 'template/path/template1'}}
    {{/ember-imdt-tab-pane}}
    {{#ember-imdt-tab-pane label="Tab Two" name="tab12"}}
      {{render 'template/path/template2'}}
    {{/ember-imdt-tab-pane}}
    {{#ember-imdt-tab-pane label="Tab Three" name="tab13"}}
      {{render 'template/path/template3'}}
    {{/ember-imdt-tab-pane}}
{{/ember-imdt-tab-panel}}

If any of the above templates has a controller created for it, for instance lets say we have the controller/path/template3 if this is the case, the third tab, wich calls for template/path/template3 will automaticaly have this controller assigned to it. Here's an example

// app/controller/custom/controllername.js
import Ember from 'ember';

export default Ember.Controller.extend({
  foo: "bar"
});

<!-- app/templates/index.hbs -->
{{#ember-imdt-tab-panel activeTabName="tab"}}
 {{#ember-imdt-tab-pane label="Tab Three" name="tab"}}
   {{render 'custom/controllername'}}
 {{/ember-imdt-tab-pane}}
{{/ember-imdt-tab-panel}}

<!-- app/templates/custom/controllername -->
{{foo}}

With the above code, what would be displayed in the tab would be bar. This is a very simple example, just to show that the controller and tab binding is possible.