From b8c10c0aac500a66fbf418bcd9f2b26432fac409 Mon Sep 17 00:00:00 2001 From: Randall Kanna Date: Tue, 14 Jul 2015 17:30:11 -0700 Subject: [PATCH 1/2] addition of documentation --- README.md | 46 +++++++++++++++----- package.json | 5 ++- tests/dummy/app/styles/{app.css => app.scss} | 16 ------- tests/dummy/app/templates/application.hbs | 20 ++++----- 4 files changed, 46 insertions(+), 41 deletions(-) rename tests/dummy/app/styles/{app.css => app.scss} (66%) diff --git a/README.md b/README.md index 8b2b700..313e83b 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,41 @@ Basic tabbed interface. -## How to use +## Usage +This Ember addon provides a `ui-tab` component. -* Include the latest version in your `package.json`. -* Components render buttons that will control their associated content. -* Pass in a `target`, which is the id of the associated content element. -* `on-click="setCurrentTab"` is required as the action will bubble up in your application. -* `currentTab=currentTab` is required as your app will pass in the current tab information back to the component. -* Include the action, `setCurrentTab`, in your actions hash (controller) to set the current tab. - * `setCurrentTab(tab) { this.set('currentTab', tab); }` +Pass in a target which is the ID of the associated element. Current tab is required as your app will pass in the current tab information back to the component. -## Options +**Example:** +Template: +``` +
+ {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-one" default=true}}Tab One{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-two"}}Tab Two{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-three"}}Tab Three{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-four"}}Tab Four{{/ui-tab}} +
-* You can specify the default content by passing in `default=true`. -* i.e. `{{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#id" default=true}}Button1{{/ui-tab}}` +

Tab One

+

Tab Two

+

Tab Three

+

Tab Four

+``` + + +Include the action 'setCurrentTab' in your controller to set the current tab. +Controller: +``` +import Ember from 'ember'; + +export default Ember.Controller.extend({ + actions: { + setCurrentTab(tab) { + this.set('currentTab', tab); + } + } +}); +``` + +## Styles +The component `ui-tab` component is easily customizable for your application. diff --git a/package.json b/package.json index b6b0a46..10bfb2b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "license": "MIT", "devDependencies": { "broccoli-asset-rev": "^2.0.2", + "broccoli-sass": "^0.6.6", "ember-cli": "0.2.7", "ember-cli-app-version": "0.3.3", "ember-cli-content-security-policy": "0.4.0", @@ -29,9 +30,9 @@ "ember-cli-qunit": "0.3.13", "ember-cli-uglify": "^1.0.1", "ember-data": "1.0.0-beta.18", + "ember-disable-prototype-extensions": "^1.0.0", "ember-disable-proxy-controllers": "^1.0.0", "ember-export-application-global": "^1.0.2", - "ember-disable-prototype-extensions": "^1.0.0", "ember-try": "0.0.6" }, "keywords": [ @@ -43,4 +44,4 @@ "ember-addon": { "configPath": "tests/dummy/config" } -} \ No newline at end of file +} diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.scss similarity index 66% rename from tests/dummy/app/styles/app.css rename to tests/dummy/app/styles/app.scss index d9a6da9..ccef5c8 100644 --- a/tests/dummy/app/styles/app.css +++ b/tests/dummy/app/styles/app.scss @@ -1,18 +1,7 @@ -body { - background: #CED1DB; -} - -h2 { - text-align: center; - font-size: 50px; - color: #FF6862; -} - button { display: inline-block; width: 120px; height: 60px; - background: #FF6862; margin: 0; outline: none; border-radius: 20px 20px 0 0; @@ -32,8 +21,3 @@ p { font-size: 40px; color: #332884; } - -hr { - margin-top: 0; - border: 5px solid white; -} diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 9d13ed1..e9b6b2a 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,15 +1,11 @@ -

FireFly Tabs

-
- {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#new-york" default=true}}New York{{/ui-tab}} - {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#los-angeles"}}Los Angeles{{/ui-tab}} - {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#chicago"}}Chicago{{/ui-tab}} - {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#san-francisco"}}San Francisco{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-one" default=true}}Tab One{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-two"}}Tab Two{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-three"}}Tab Three{{/ui-tab}} + {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-four"}}Tab Four{{/ui-tab}}
-
- -

Financial

-

Hollywood

-

Chiraq

-

Tech

+

Tab One

+

Tab Two

+

Tab Three

+

Tab Four

From 55b0f9a13491eabf40df8ca8ac55f34b1f5df6ed Mon Sep 17 00:00:00 2001 From: randallkanna Date: Tue, 14 Jul 2015 21:37:06 -0700 Subject: [PATCH 2/2] addition --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 313e83b..2f88768 100644 --- a/README.md +++ b/README.md @@ -3,13 +3,15 @@ Basic tabbed interface. ## Usage + This Ember addon provides a `ui-tab` component. Pass in a target which is the ID of the associated element. Current tab is required as your app will pass in the current tab information back to the component. **Example:** Template: -``` + +```hbs
{{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-one" default=true}}Tab One{{/ui-tab}} {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-two"}}Tab Two{{/ui-tab}} @@ -23,10 +25,10 @@ Template:

Tab Four

``` - Include the action 'setCurrentTab' in your controller to set the current tab. + Controller: -``` +```javascript import Ember from 'ember'; export default Ember.Controller.extend({ @@ -39,4 +41,5 @@ export default Ember.Controller.extend({ ``` ## Styles + The component `ui-tab` component is easily customizable for your application.