ic-tabs

0.1.3 • Public • Published

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-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-tab 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.

Readme

Keywords

none

Package Sidebar

Install

npm i ic-tabs

Weekly Downloads

634

Version

0.1.3

License

MIT

Last publish

Collaborators

  • ryanflorence