Skip to content

addition of documentation #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

addition of documentation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8c10c0
addition of documentation
randallkanna Jul 15, 2015
55b0f9a
addition
randallkanna Jul 15, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 38 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,44 @@

Basic tabbed interface.

## How to use
## Usage

* 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); }`
This Ember addon provides a `ui-tab` component.
Copy link
Member

@twokul twokul Jul 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extra line above


## Options
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.

* 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}}`
**Example:**
Template:

```hbs
<div class="container">
{{#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}}
</div>

<p id="tab-one">Tab One</p>
<p id="tab-two">Tab Two</p>
<p id="tab-three">Tab Three</p>
<p id="tab-four">Tab Four</p>
```

Copy link
Member

@twokul twokul Jul 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove extra line

Include the action 'setCurrentTab' in your controller to set the current tab.

Controller:
```javascript
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.
Copy link
Member

@twokul twokul Jul 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extra line above

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": [
Expand All @@ -43,4 +44,4 @@
"ember-addon": {
"configPath": "tests/dummy/config"
}
}
}
16 changes: 0 additions & 16 deletions tests/dummy/app/styles/app.css → tests/dummy/app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -32,8 +21,3 @@ p {
font-size: 40px;
color: #332884;
}

hr {
margin-top: 0;
border: 5px solid white;
}
20 changes: 8 additions & 12 deletions tests/dummy/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
<h2 id="title">FireFly Tabs</h2>

<div class="container">
{{#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}}
</div>

<hr>

<p id="new-york">Financial</p>
<p id="los-angeles">Hollywood</p>
<p id="chicago">Chiraq</p>
<p id="san-francisco">Tech</p>
<p id="tab-one">Tab One</p>
<p id="tab-two">Tab Two</p>
<p id="tab-three">Tab Three</p>
<p id="tab-four">Tab Four</p>