addon/components/ui-tab-menu.js

  1. import { computed } from '@ember/object';
  2. import { isArray } from '@ember/array';
  3. import Component from '@ember/component';
  4. import layout from '../templates/components/ui-tab-menu';
  5.  
  6.  
  7. /**
  8. ui-tab-menu component
  9.  
  10. @module components
  11. @namespace components
  12. @class UiTabMenu
  13. @constructor
  14. */
  15. export default Component.extend({
  16.     layout: layout,
  17.     tagName: 'div',
  18.     tabs: '',
  19.     delimiter: ',',
  20.     classNameBindings: ['_uiClass', '_theme', '_componentClass'],
  21.     _uiClass: 'ui',
  22.     _componentClass: 'menu',
  23.     theme: '',
  24.     _theme: computed('theme', {
  25.         get() {
  26.             return this.get('theme') ? this.get('theme') : 'top attached tabular';
  27.         }
  28.     }),
  29.     _tabs: computed('tabs', {
  30.         get() {
  31.             if(isArray(this.get('tabs'))){
  32.                 return this.get('tabs');
  33.             }
  34.  
  35.             return this.get('tabs').split(this.get('delimiter'));
  36.         }
  37.     }),
  38.     /**
  39.     the active tab name
  40.     @property {String} active
  41.     */
  42.     active: '',
  43.     didInsertElement() {
  44.         this.$('.item').tab();
  45.         this.$('.item[data-tab="'+this.active+'"]').addClass("active");
  46.     }
  47. });