isabella232 / ic-tabs

ic-tabs

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.