Sitepoint Tab Switcher

application.controller.js

//Article url: http://www.sitepoint.com/understanding-components-in-ember-2/

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var tabItems = [
      {
        title: 'Tab 1',
        content: 'Some content for tab 1'
      },
      {
        title: 'Tab 2',
        content: 'Some content for tab 2'
      },
      {
        title: 'Tab 3',
        content: 'Some content for tab 3'
      }
    ];
    tabItems = tabItems.map(function(item){
      return Ember.Object.create(item);
    });
    return tabItems;
  }
});

application.template.hbs

{{tab-switcher tabItems=model}}
{{outlet}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.content, .tabs{
  text-align: center;
}

.tabs {
  margin: 100px 0 20px;
  padding: 0;
  line-height: 35px;
  height: 37px;
  overflow: hidden;
  font-size: 12px;
  position: relative;
}

.tabs .tab-item {
  border: 1px solid #AAA;
  background: #D1D1D1;
  background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
  display: inline-block;
  position:relative;
  z-index: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
  text-shadow: 0 1px #FFF;
  margin: 0 -5px;
  width: 100px;
}

.tabs .tab-item.is-selected {
  background: #FFF;
  color: #333;
  z-index: 2;
  border-top-color: #FFF;
}

.tabs:before {
  position: absolute;
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  border-top: 1px solid #AAA;
  z-index: 1;
}

.tabs .tab-item:before,
.tabs .tab-item:after {
  border: 1px solid #AAA;
  position: absolute;
  top: -1px;
  width: 6px;
  height: 6px;
  content: "";
}

.tabs .tab-item:before {
  left: -7px;
  border-top-right-radius: 6px;
  border-width: 1px 1px 0px 0px;
  box-shadow: 2px 0px 0 #ECECEC;
}

.tabs .tab-item:after {
  right: -7px;
  border-top-left-radius: 6px;
  border-width: 1px 0px 0px 1px;
  box-shadow: -2px 0px 0 #ECECEC;
}

.tabs .tab-item.is-selected:before {
  box-shadow: 2px 0px 0 #FFF;
}

.tabs .tab-item.is-selected:after {
  box-shadow: -2px 0px 0 #FFF;
}

.tabs span{
  display: block;
  cursor: pointer;
}

tab-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ["tab-item"],
  classNameBindings: ["isSelected"],
  isSelected: Ember.computed.alias('item.isSelected'),
  actions:{
    clicked: function(tabItem){
      this.sendAction("setSelectedTabItemAction", tabItem);
    }
  }
});

tab-item.template.hbs

<span {{action "clicked" item }}>{{item.title}}</span>
{{yield}}

tab-switcher.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    setSelectedTabItem: function(tabItem){
      if(this.get('selectedTabItem')){
        // Set previously set tab item isSelected property to false
        this.get('selectedTabItem').set('isSelected', false);
      }

      // Set currently set tab item isSelected property to true
      this.set('selectedTabItem', tabItem);
      this.get('selectedTabItem').set('isSelected', true);
    }
  }
});

tab-switcher.template.hbs

<p class="content" >
  {{selectedTabItem.content}}
</p>

<div class="tabs">
{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}
</div>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.1.0",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "2.1.0"
  }
}