From 9e21eb17cf9f8fc6c5713587bbeae34aecf2cfe8 Mon Sep 17 00:00:00 2001 From: Mike North Date: Thu, 9 Apr 2015 09:59:46 -0700 Subject: [PATCH 1/4] basic tabs --- addon/components/materialize-tabs-tab.js | 29 +++++ addon/components/materialize-tabs.js | 58 +++++++++ .../components/materialize-tabs-tab.hbs | 3 + .../templates/components/materialize-tabs.hbs | 5 + app/components/materialize-tabs-tab.js | 3 + app/components/materialize-tabs.js | 3 + package.json | 5 +- tests/dummy/app/controllers/tabs.js | 16 +++ tests/dummy/app/router.js | 3 +- tests/dummy/app/templates/index.hbs | 4 + tests/dummy/app/templates/tabs.hbs | 35 +++++ tests/integration/tabs-test.js | 30 +++++ .../components/materialize-tabs-tab-test.js | 4 + .../unit/components/materialize-tabs-test.js | 121 ++++++++++++++++++ 14 files changed, 316 insertions(+), 3 deletions(-) create mode 100644 addon/components/materialize-tabs-tab.js create mode 100644 addon/components/materialize-tabs.js create mode 100644 addon/templates/components/materialize-tabs-tab.hbs create mode 100644 addon/templates/components/materialize-tabs.hbs create mode 100644 app/components/materialize-tabs-tab.js create mode 100644 app/components/materialize-tabs.js create mode 100644 tests/dummy/app/controllers/tabs.js create mode 100644 tests/dummy/app/templates/tabs.hbs create mode 100644 tests/integration/tabs-test.js create mode 100644 tests/unit/components/materialize-tabs-tab-test.js create mode 100644 tests/unit/components/materialize-tabs-test.js diff --git a/addon/components/materialize-tabs-tab.js b/addon/components/materialize-tabs-tab.js new file mode 100644 index 00000000..7b64b556 --- /dev/null +++ b/addon/components/materialize-tabs-tab.js @@ -0,0 +1,29 @@ +import Ember from 'ember'; +import layout from '../templates/components/materialize-tabs-tab'; + +export default Ember.Component.extend({ + layout: layout, + tagName: 'li', + classNames: ['materialize-tabs-tab', 'tab'], + + _tabSet: Ember.computed(function () { + return this.nearestWithProperty('___materializeTabs'); + }), + + _active: Ember.computed('_tabSet.selected', 'value', function () { + return this.get('_tabSet.selected') === this.get('value'); + }), + + click: function () { + this.trigger('tabClicked', this); + }, + + didInsertElement: function () { + this._super(...arguments); + var tabSet = this.get('_tabSet'); + if (!tabSet) { + throw new Error('materialize-tabs-tab cannot be used outside the context of a materialize-tabs'); + } + tabSet.registerTab(this); + } +}); diff --git a/addon/components/materialize-tabs.js b/addon/components/materialize-tabs.js new file mode 100644 index 00000000..7cd33072 --- /dev/null +++ b/addon/components/materialize-tabs.js @@ -0,0 +1,58 @@ +import Ember from 'ember'; +import layout from '../templates/components/materialize-tabs'; + +export default Ember.Component.extend({ + layout: layout, + tagName: 'ul', + classNames: ['materialize-tabs', 'tabs'], + ___materializeTabs: true, + _tabComponents: null, + numTabs: Ember.computed.alias('_tabComponents.length'), + selected: null, + + init: function () { + this._super(...arguments); + this.set('_tabComponents', new Ember.A([])); + }, + + _updateIndicatorPosition: function (animate=true) { + var tabComponent = this.get('_tabComponents').filterBy('value', this.get('selected'))[0]; + var tabSetRect = this.element.getBoundingClientRect(); + if (tabComponent) { + var tabRect = tabComponent.element.getBoundingClientRect(); + + var cssParams = { + left: tabRect.left - tabSetRect.left, + right: tabSetRect.right - tabRect.right + }; + + if (!animate) { + this.$('.indicator').css(cssParams); + } + else { + this.$('.indicator1').velocity(cssParams, {duration: 150}); + this.$('.indicator2').velocity(cssParams, {duration: 150, delay: 40}); + } + } + }, + + didInsertElement: function () { + this._super(...arguments); + if (this.get('selected') === null && this.get('content.length') > 0) { + this.set('selected', this.get('content')[0].id); + } + this._updateIndicatorPosition(false); + }, + + _setActiveTab: function (tabComponent) { + this.set('selected', tabComponent.get('value')); + this._updateIndicatorPosition(); + }, + + registerTab: function (tabComponent) { + this.get('_tabComponents').addObject(tabComponent); + tabComponent.on('tabClicked', function (tab) { + this._setActiveTab(tab); + }.bind(this)); + } +}); diff --git a/addon/templates/components/materialize-tabs-tab.hbs b/addon/templates/components/materialize-tabs-tab.hbs new file mode 100644 index 00000000..67a2fdd9 --- /dev/null +++ b/addon/templates/components/materialize-tabs-tab.hbs @@ -0,0 +1,3 @@ + +{{title}} + diff --git a/addon/templates/components/materialize-tabs.hbs b/addon/templates/components/materialize-tabs.hbs new file mode 100644 index 00000000..7f499f32 --- /dev/null +++ b/addon/templates/components/materialize-tabs.hbs @@ -0,0 +1,5 @@ +{{#each content as |tab|}} + {{materialize-tabs-tab title=tab.title value=tab.id}} +{{/each}} +
+
\ No newline at end of file diff --git a/app/components/materialize-tabs-tab.js b/app/components/materialize-tabs-tab.js new file mode 100644 index 00000000..e540c5b5 --- /dev/null +++ b/app/components/materialize-tabs-tab.js @@ -0,0 +1,3 @@ +import materializeTabsTab from 'ember-cli-materialize/components/materialize-tabs-tab'; + +export default materializeTabsTab; diff --git a/app/components/materialize-tabs.js b/app/components/materialize-tabs.js new file mode 100644 index 00000000..9eea589f --- /dev/null +++ b/app/components/materialize-tabs.js @@ -0,0 +1,3 @@ +import materializeTabs from 'ember-cli-materialize/components/materialize-tabs'; + +export default materializeTabs; diff --git a/package.json b/package.json index 418f9f77..134d389a 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,10 @@ "ember-cli-qunit": "0.3.9", "ember-cli-sass": "^3.2.2", "ember-cli-uglify": "1.0.1", - "ember-export-application-global": "^1.0.2", "ember-disable-prototype-extensions": "^1.0.0", - "ember-try": "0.0.3" + "ember-export-application-global": "^1.0.2", + "ember-try": "0.0.3", + "liquid-fire": "git+ssh://git@github.com:ef4/liquid-fire.git#master" }, "description": "An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.", "keywords": [ diff --git a/tests/dummy/app/controllers/tabs.js b/tests/dummy/app/controllers/tabs.js new file mode 100644 index 00000000..9c53311f --- /dev/null +++ b/tests/dummy/app/controllers/tabs.js @@ -0,0 +1,16 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + basicTabsContent: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]), + basicTabsSelection: 'a', + + actions: { + addTab: function () { + this.get('basicTabsContent').addObject({id: 'd', title: 'Fourth'}); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index dd833d3a..b801359f 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -8,12 +8,13 @@ var Router = Ember.Router.extend({ Router.map(function() { this.route("badges"); this.route("buttons"); - this.route("navbar"); this.route("cards"); this.route("collapsible"); this.route("input"); this.route("loader"); + this.route("navbar"); this.route("parallax"); + this.route("tabs"); }); export default Router; diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 28883334..6662040a 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -64,6 +64,10 @@ {{#link-to 'parallax' class="collection-item"}} Parallax{{#materialize-badge class="new"}}1{{/materialize-badge}} {{/link-to}} + + {{#link-to 'tabs' class="collection-item"}} + Tabs{{#materialize-badge class="new"}}1{{/materialize-badge}} + {{/link-to}} diff --git a/tests/dummy/app/templates/tabs.hbs b/tests/dummy/app/templates/tabs.hbs new file mode 100644 index 00000000..880a82e0 --- /dev/null +++ b/tests/dummy/app/templates/tabs.hbs @@ -0,0 +1,35 @@ +
+
+
+
+

Tabs

+
+
+
+
+ +
+
+
+

The component supports one option:

+
    +
  • mode, default value indeterminate - Loader mode (determinate, indeterminate, circular)
    • + +
+
+
+ + +
+

Simple Tabs

+
+ {{materialize-tabs + content=basicTabsContent + selected=basicTabsSelection}} + + +
+
+ + +
\ No newline at end of file diff --git a/tests/integration/tabs-test.js b/tests/integration/tabs-test.js new file mode 100644 index 00000000..702348fd --- /dev/null +++ b/tests/integration/tabs-test.js @@ -0,0 +1,30 @@ +import Ember from 'ember'; + +import startApp from '../../tests/helpers/start-app'; +import { test } from 'ember-qunit'; + +var App; + +module('Tabs - Integration', { + setup: function() { + App = startApp(); + }, + teardown: function() { + Ember.run(App, 'destroy'); + } +}); + + +test('Basic Example - One set of tabs should be rendered, with three tabs', function(assert) { + visit('/tabs').then(function() { + assert.equal(find('.basic-tabs-example .materialize-tabs').length, 1, 'One set of tabs'); + assert.equal(find('.basic-tabs-example .materialize-tabs .materialize-tabs-tab a').length, 3, 'Three tabs in the set'); + assert.equal(find('.basic-tabs-example .materialize-tabs .materialize-tabs-tab:first-child a').text().trim(), 'First', 'Label of first tab is "First"'); + assert.equal(find('.basic-tabs-example .materialize-tabs .materialize-tabs-tab:nth-child(2) a').text().trim(), 'Second', 'Label of second tab is "Second"'); + assert.equal(find('.basic-tabs-example .materialize-tabs .materialize-tabs-tab:nth-child(3) a').text().trim(), 'Third', 'Label of third tab is "Third"'); + + assert.equal(find('.basic-tabs-example .materialize-tabs .materialize-tabs-tab:first-child .active').length, 1, 'First tab is initially selected'); + + + }); +}); diff --git a/tests/unit/components/materialize-tabs-tab-test.js b/tests/unit/components/materialize-tabs-tab-test.js new file mode 100644 index 00000000..96da9aee --- /dev/null +++ b/tests/unit/components/materialize-tabs-tab-test.js @@ -0,0 +1,4 @@ +/** + * Testing of this component is included in the materialize-tabs test cases, since this component + * cannot exist independently + */ diff --git a/tests/unit/components/materialize-tabs-test.js b/tests/unit/components/materialize-tabs-test.js new file mode 100644 index 00000000..f5f2bdb6 --- /dev/null +++ b/tests/unit/components/materialize-tabs-test.js @@ -0,0 +1,121 @@ +import Ember from 'ember'; + +import { + moduleForComponent, + test +} from 'ember-qunit'; + +moduleForComponent('materialize-tabs', { + // Specify the other units that are required for this test + needs: ['component:materialize-tabs-tab'] +}); + +test('it renders', function(assert) { + assert.expect(2); + + // Creates the component instance + var component = this.subject(); + + component.setProperties({ + content: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]), + selected: 'a' + }); + + assert.equal(component._state, 'preRender'); + + // Renders the component to the page + this.render(); + assert.equal(component._state, 'inDOM'); +}); + +test('programatically setting selected tab', function (assert) { + + assert.expect(2); + + // Creates the component instance + var component = this.subject(); + + component.setProperties({ + content: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]), + selected: 'a' + }); + this.render(); + assert.equal(component.$('.active').text().trim(), 'First', 'First tab is initially selected'); + + Ember.run.next(function () { + component.set('selected', 'b'); + Ember.run.next(function () { + assert.equal(component.$('.active').text().trim(), 'Second', 'Second tab is now selected'); + }); + }); +}); + +test('programatically adding tabs', function (assert) { + + assert.expect(2); + + // Creates the component instance + var component = this.subject(); + + component.setProperties({ + content: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]), + selected: 'a' + }); + this.render(); + + assert.equal(Ember.$('.materialize-tabs-tab').length, 3, 'Three tabs initially'); + + + Ember.run.next(this, function () { + + component.get('content').addObject({id: 'd', title: 'Fourth'}); + Ember.run.schedule('afterRender', function () { + assert.equal(Ember.$('.materialize-tabs-tab').length, 4, 'Four tabs now'); + }); + }); +}); + +test('No initial selection - first tab should be selected', function (assert) { + + assert.expect(1); + + // Creates the component instance + var component = this.subject(); + + component.setProperties({ + content: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]) + }); + this.render(); + assert.equal(component.$('.active').text().trim(), 'First', 'First tab is initially selected'); +}); + + +test('Empty content - should render an empty UL', function (assert) { + + assert.expect(1); + + // Creates the component instance + var component = this.subject(); + + component.setProperties({ + content: new Ember.A([]) + }); + this.render(); + assert.equal(component.$('.materialize-tabs-tab').length, 0, 'No tabs should be rendered'); +}); From c76a8be8abcd4e9c8355f6b28a96d4d6e078958f Mon Sep 17 00:00:00 2001 From: Mike North Date: Thu, 9 Apr 2015 10:48:57 -0700 Subject: [PATCH 2/4] optionValuePath, optionLabelPath --- addon/components/materialize-tabs-tab.js | 4 +++- addon/components/materialize-tabs.js | 21 ++++++++++++++++--- .../templates/components/materialize-tabs.hbs | 3 ++- tests/dummy/app/controllers/tabs.js | 7 ++++++- tests/dummy/app/templates/tabs.hbs | 19 ++++++++++++++--- .../unit/components/materialize-tabs-test.js | 2 +- 6 files changed, 46 insertions(+), 10 deletions(-) diff --git a/addon/components/materialize-tabs-tab.js b/addon/components/materialize-tabs-tab.js index 7b64b556..eab1bbea 100644 --- a/addon/components/materialize-tabs-tab.js +++ b/addon/components/materialize-tabs-tab.js @@ -5,7 +5,9 @@ export default Ember.Component.extend({ layout: layout, tagName: 'li', classNames: ['materialize-tabs-tab', 'tab'], - + init: function () { + this._super(...arguments); + }, _tabSet: Ember.computed(function () { return this.nearestWithProperty('___materializeTabs'); }), diff --git a/addon/components/materialize-tabs.js b/addon/components/materialize-tabs.js index 7cd33072..83962a5e 100644 --- a/addon/components/materialize-tabs.js +++ b/addon/components/materialize-tabs.js @@ -1,14 +1,18 @@ import Ember from 'ember'; import layout from '../templates/components/materialize-tabs'; +var map = Ember.EnumerableUtils.map; export default Ember.Component.extend({ layout: layout, tagName: 'ul', + content: null, classNames: ['materialize-tabs', 'tabs'], ___materializeTabs: true, _tabComponents: null, numTabs: Ember.computed.alias('_tabComponents.length'), selected: null, + optionValuePath: 'id', + optionLabelPath: 'title', init: function () { this._super(...arguments); @@ -36,17 +40,28 @@ export default Ember.Component.extend({ } }, + _content: Ember.computed('content.[]', 'optionLabelPath', 'optionValuePath', function () { + var lp = this.get('optionLabelPath'); + var vp = this.get('optionValuePath'); + return new Ember.A(map(this.get('content') || [], c => ({id: c[vp], title: c[lp]}))); + }), + didInsertElement: function () { this._super(...arguments); - if (this.get('selected') === null && this.get('content.length') > 0) { - this.set('selected', this.get('content')[0].id); + var tabComponents = this.get('_tabComponents'); + if (this.get('selected') === null && tabComponents.length > 0) { + this.set('selected', tabComponents[tabComponents.length - 1].get('value')); } this._updateIndicatorPosition(false); + this.addObserver('selected', function () { + this._updateIndicatorPosition(); + }); }, + _indicatorUpdater: null, + _setActiveTab: function (tabComponent) { this.set('selected', tabComponent.get('value')); - this._updateIndicatorPosition(); }, registerTab: function (tabComponent) { diff --git a/addon/templates/components/materialize-tabs.hbs b/addon/templates/components/materialize-tabs.hbs index 7f499f32..97975d25 100644 --- a/addon/templates/components/materialize-tabs.hbs +++ b/addon/templates/components/materialize-tabs.hbs @@ -1,5 +1,6 @@ -{{#each content as |tab|}} +{{#each tab in _content}} {{materialize-tabs-tab title=tab.title value=tab.id}} {{/each}} +{{yield}}
\ No newline at end of file diff --git a/tests/dummy/app/controllers/tabs.js b/tests/dummy/app/controllers/tabs.js index 9c53311f..0ba28159 100644 --- a/tests/dummy/app/controllers/tabs.js +++ b/tests/dummy/app/controllers/tabs.js @@ -6,8 +6,13 @@ export default Ember.Controller.extend({ {id: 'b', title: 'Second'}, {id: 'c', title: 'Third'} ]), + alternateTabsContent: new Ember.A([ + {key: 'a', label: 'First'}, + {key: 'b', label: 'Second'}, + {key: 'c', label: 'Third'} + ]), basicTabsSelection: 'a', - + secondTabsSelection: 'g', actions: { addTab: function () { this.get('basicTabsContent').addObject({id: 'd', title: 'Fourth'}); diff --git a/tests/dummy/app/templates/tabs.hbs b/tests/dummy/app/templates/tabs.hbs index 880a82e0..4a1f0dc5 100644 --- a/tests/dummy/app/templates/tabs.hbs +++ b/tests/dummy/app/templates/tabs.hbs @@ -11,7 +11,7 @@
-

The component supports one option:

+

The component supports several options:

  • mode, default value indeterminate - Loader mode (determinate, indeterminate, circular)
    • @@ -26,9 +26,22 @@ {{materialize-tabs content=basicTabsContent selected=basicTabsSelection}} - -
+
+ {{materialize-tabs + content=alternateTabsContent + selected=basicTabsSelection + optionValuePath='key' + optionLabelPath='label'}} +
+
+ {{#materialize-tabs + selected=basicTabsSelection}} + {{materialize-tabs-tab value='a' title="Sixth"}} + {{materialize-tabs-tab value='b' title="Seventh"}} + {{materialize-tabs-tab value='c' title="Eigth"}} + {{/materialize-tabs}} +
diff --git a/tests/unit/components/materialize-tabs-test.js b/tests/unit/components/materialize-tabs-test.js index f5f2bdb6..29e94822 100644 --- a/tests/unit/components/materialize-tabs-test.js +++ b/tests/unit/components/materialize-tabs-test.js @@ -52,7 +52,7 @@ test('programatically setting selected tab', function (assert) { Ember.run.next(function () { component.set('selected', 'b'); - Ember.run.next(function () { + Ember.run.schedule('afterRender', function () { assert.equal(component.$('.active').text().trim(), 'Second', 'Second tab is now selected'); }); }); From cc284b9224241bd84b33c7468a29b2e7a36f4a4b Mon Sep 17 00:00:00 2001 From: Mike North Date: Fri, 10 Apr 2015 00:35:47 -0700 Subject: [PATCH 3/4] colWidth support, more tests --- addon/components/materialize-tabs-tab.js | 13 ++-- addon/components/materialize-tabs.js | 6 +- .../templates/components/materialize-tabs.hbs | 16 +++-- tests/dummy/app/templates/tabs.hbs | 61 ++++++++++++++++--- tests/index.html | 2 +- .../unit/components/materialize-tabs-test.js | 21 +++++++ 6 files changed, 94 insertions(+), 25 deletions(-) diff --git a/addon/components/materialize-tabs-tab.js b/addon/components/materialize-tabs-tab.js index eab1bbea..7f3948eb 100644 --- a/addon/components/materialize-tabs-tab.js +++ b/addon/components/materialize-tabs-tab.js @@ -4,10 +4,15 @@ import layout from '../templates/components/materialize-tabs-tab'; export default Ember.Component.extend({ layout: layout, tagName: 'li', - classNames: ['materialize-tabs-tab', 'tab'], - init: function () { - this._super(...arguments); - }, + classNames: ['materialize-tabs-tab', 'tab', 'col'], + classNameBindings: ['_colClass'], + + colWidth: Ember.computed.alias('_tabSet.colWidth'), + + _colClass: Ember.computed('colWidth', function () { + return 's' + this.get('colWidth'); + }), + _tabSet: Ember.computed(function () { return this.nearestWithProperty('___materializeTabs'); }), diff --git a/addon/components/materialize-tabs.js b/addon/components/materialize-tabs.js index 83962a5e..3a99d7d4 100644 --- a/addon/components/materialize-tabs.js +++ b/addon/components/materialize-tabs.js @@ -4,15 +4,15 @@ var map = Ember.EnumerableUtils.map; export default Ember.Component.extend({ layout: layout, - tagName: 'ul', content: null, - classNames: ['materialize-tabs', 'tabs'], + classNames: ['materialize-tabs', 'row'], ___materializeTabs: true, _tabComponents: null, numTabs: Ember.computed.alias('_tabComponents.length'), selected: null, optionValuePath: 'id', optionLabelPath: 'title', + colWidth: 2, init: function () { this._super(...arguments); @@ -58,8 +58,6 @@ export default Ember.Component.extend({ }); }, - _indicatorUpdater: null, - _setActiveTab: function (tabComponent) { this.set('selected', tabComponent.get('value')); }, diff --git a/addon/templates/components/materialize-tabs.hbs b/addon/templates/components/materialize-tabs.hbs index 97975d25..e8434b9e 100644 --- a/addon/templates/components/materialize-tabs.hbs +++ b/addon/templates/components/materialize-tabs.hbs @@ -1,6 +1,10 @@ -{{#each tab in _content}} - {{materialize-tabs-tab title=tab.title value=tab.id}} -{{/each}} -{{yield}} -
-
\ No newline at end of file +
+
    + {{#each tab in _content}} + {{materialize-tabs-tab title=tab.title value=tab.id}} + {{/each}} + {{yield}} +
    +
    +
+
diff --git a/tests/dummy/app/templates/tabs.hbs b/tests/dummy/app/templates/tabs.hbs index 4a1f0dc5..bd373c3d 100644 --- a/tests/dummy/app/templates/tabs.hbs +++ b/tests/dummy/app/templates/tabs.hbs @@ -13,35 +13,76 @@

The component supports several options:

    -
  • mode, default value indeterminate - Loader mode (determinate, indeterminate, circular)
    • - +
  • content, default value [] - tabs array
    • +
  • selected, default value null - selected tab id
    • +
  • colWidth, default value 2 - width of tabs, in grid columns
-
-

Simple Tabs

-
+

Basic Usage

+

Creating a basic set of tabs is simple, and you have several syntax options to choose from. + First, you can pass an array of tabs to the {{materialize-tabs}} component:

+
{{materialize-tabs content=basicTabsContent selected=basicTabsSelection}}
-
+ + 
+      
+  {{materialize-tabs
+      content=tabSet
+      selected=selectedTabId}}
+      
+
+

By default, the structure of the array of tabs is expected to look like this

+ + 
+    
+    [ {id: 'a', title: 'First'},
+      {id: 'b', title: 'Second'},
+      {id: 'c', title: 'Third'} ]
+    
+
+

If you wish to use different key and value properties, you may specify some additional options

+
+ {{materialize-tabs content=alternateTabsContent selected=basicTabsSelection optionValuePath='key' optionLabelPath='label'}} -
-
+
+ 
+      
+  {{materialize-tabs
+      content=tabSet
+      selected=selectedTabId
+      optionValuePath='key'
+      optionLabelPath='label'}}
+      
+
+

Alternate Syntax

+

The following syntax allows for more granular control over the particulars of each tab

+
{{#materialize-tabs selected=basicTabsSelection}} {{materialize-tabs-tab value='a' title="Sixth"}} {{materialize-tabs-tab value='b' title="Seventh"}} - {{materialize-tabs-tab value='c' title="Eigth"}} + {{materialize-tabs-tab value='c' title="Eighth"}} {{/materialize-tabs}} -
+
+ 
+      
+  {{#materialize-tabs selected=selectedTabId}}
+      {{materialize-tabs-tab value='a' title='Sixth'}}
+      {{materialize-tabs-tab value='b' title='Seventh'}}
+      {{materialize-tabs-tab value='c' title='Eighth'}}
+  {{/materialize-tabs}}
+      
+
diff --git a/tests/index.html b/tests/index.html index 94ae1dd4..50cf9788 100644 --- a/tests/index.html +++ b/tests/index.html @@ -11,7 +11,7 @@ {{content-for 'test-head'}} - + {{content-for 'head-footer'}} diff --git a/tests/unit/components/materialize-tabs-test.js b/tests/unit/components/materialize-tabs-test.js index 29e94822..62eca27c 100644 --- a/tests/unit/components/materialize-tabs-test.js +++ b/tests/unit/components/materialize-tabs-test.js @@ -119,3 +119,24 @@ test('Empty content - should render an empty UL', function (assert) { this.render(); assert.equal(component.$('.materialize-tabs-tab').length, 0, 'No tabs should be rendered'); }); + + +test('Col width - should result in the correct CSS classes', function (assert) { + + assert.expect(3); + + // Creates the component instance + var component = this.subject(); + assert.equal(component.get('colWidth'), 2, 'Default col width is 2'); + component.setProperties({ + colWidth: 4, + content: new Ember.A([ + {id: 'a', title: 'First'}, + {id: 'b', title: 'Second'}, + {id: 'c', title: 'Third'} + ]) + }); + this.render(); + assert.equal(component.get('_tabComponents')[0].get('colWidth'), 4, 'Col width on tab set applies to tabs'); + assert.equal(component.get('_tabComponents')[0].get('_colClass'), 's4', 'tab col class is correct'); +}); From f94510c035a7d69c0b7671178eaa9493f0e4ed43 Mon Sep 17 00:00:00 2001 From: Mike North Date: Fri, 10 Apr 2015 12:13:31 -0700 Subject: [PATCH 4/4] liquid-fire dependency as a SHA --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc39a5ed..c03ad44c 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "ember-disable-prototype-extensions": "^1.0.0", "ember-export-application-global": "^1.0.2", "ember-try": "0.0.3", - "liquid-fire": "git+ssh://git@github.com:ef4/liquid-fire.git#master" + "liquid-fire": "git+ssh://git@github.com:ef4/liquid-fire.git#8fcefd057478ab6852d7b8b3fc8526aa5079553c" }, "description": "An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.", "keywords": [