No description, website, or topics provided.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
lib
script
test
.gitignore
.npmignore
.travis.yml
Brocfile.js
CHANGELOG
LICENSE
README.md
bower.json
karma.conf.js
package.json
testem.json

README.md

ic-tabs

Build Status

WAI-ARIA accessible tab component for Ember.js.

Demo

http://instructure.github.io/ic-tabs

Installation

$ npm install ic-tabs

or ...

$ bower install ic-tabs

or just grab your preferred distribution from dist/.

Then include the script(s) into your application:

npm+browserify

require('ic-tabs')

amd

Register ic-tabs as a package, then:

define(['ic-tabs'], ...)

named-amd

You ought to know what you're doing if this is the case.

globals

<script src="bower_components/ic-styled/main.js"></script> <script src="bower_components/ic-tabs/dist/globals/main.js"></script>

Usage

{{#ic-tabs}}
  {{#ic-tab-list}}
    {{#ic-tab}}Foo{{/ic-tab}}
    {{#ic-tab}}Bar{{/ic-tab}}
    {{#ic-tab}}Baz{{/ic-tab}}
  {{/ic-tab-list}}

  {{#ic-tab-panel}}
    <h2>Foo</h2>
  {{/ic-tab-panel}}

  {{#ic-tab-panel}}
    <h2>Bar</h2>
  {{/ic-tab-panel}}

  {{#ic-tab-panel}}
    <h2>Baz</h2>
  {{/ic-tab-panel}}
{{/ic-tabs}}
  • associations between tabs and tab-panes are inferred by order.
  • ic-tab-list must be an immediate child of ic-tabs
  • ic-tab must be an immediate child of ic-tab-list
  • ic-tab-panel must be an immediate child of ic-tabs

Options

  • {{ic-tabs selected-index=prop}} - binds the active-index to prop, mostly useful for queryParams.

Contributing

$ git clone <this repo>
$ npm install
$ npm test
# during dev
$ broccoli serve
# edit examples/ files and karma.conf to point to
# localhost:4200/globals/main.js instead of dist/globals/main.js
# new tab
$ karma start

Make a new branch, send a pull request, squashing commits into one change is preferred.