Skip to content

@koddsson koddsson released this Aug 14, 2019 · 1 commit to master since this release

<tab-container> element

A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.

Installation

$ npm install @github/tab-container-element

Usage

import '@github/tab-container-element'
<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab">Tab two</button>
    <button type="button" role="tab">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

Events

  • tab-container-change (bubbles, cancelable): fired on <tab-container> before a new tab is selected and visibility is updated. event.detail.relatedTarget is the tab panel that will be selected if the event isn't cancelled.
  • tab-container-changed (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.detail.relatedTarget is the newly visible tab panel.

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Assets 2
  • Merge pull request #15 from github/publish-to-gpr-as-well acbf9f5
  • publish to GPR as a postpublish step 894f014

v3.0.4...v3.0.5

Assets 2

@koddsson koddsson released this Aug 2, 2019 · 3 commits to master since this release

<tab-container> element

A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.

Installation

$ npm install @github/tab-container-element

Usage

import '@github/tab-container-element'
<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab">Tab two</button>
    <button type="button" role="tab">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

Events

  • tab-container-change (bubbles, cancelable): fired on <tab-container> before a new tab is selected and visibility is updated. event.detail.relatedTarget is the tab panel that will be selected if the event isn't cancelled.
  • tab-container-changed (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.detail.relatedTarget is the newly visible tab panel.

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

Assets 2

@koddsson koddsson released this Aug 2, 2019 · 3 commits to master since this release

  • Merge pull request #12 from github/add-typescript-definition-file 77e5298
  • Merge branch 'master' into add-typescript-definition-file 4e25fb8
  • add typescript definition file 4ac120a

v3.0.3...v3.0.4

Assets 2

@koddsson koddsson released this Jul 31, 2019 · 7 commits to master since this release

  • Merge pull request #13 from github/dependabot/npm_and_yarn/lodash-4.17.15 614cd3b
  • Bump lodash from 4.17.11 to 4.17.15 53f8c0a

v3.0.2...v3.0.3

Assets 2

@koddsson koddsson released this Jul 1, 2019 · 10 commits to master since this release

  • Merge pull request #11 from github/update-deps eb52df5
  • update eslint, eslint-plugin-github and flow-bin manually to latest versiosn e05123e
  • run npm update 4ec186e

v3.0.1...v3.0.2

Assets 2

@koddsson koddsson released this Jun 12, 2019 · 14 commits to master since this release

  • default export the element 💀 ce475dd

v3.0.0...v3.0.1

Assets 2

@koddsson koddsson released this Jun 10, 2019 · 17 commits to master since this release

  • reorder events in documentation 098501f
  • rename post event to be verbed 3a97371
  • use github-lint binary as lint command b56aecb

v2.0.0...v3.0.0

Assets 2

@koddsson koddsson released this May 15, 2019 · 24 commits to master since this release

  • Removed selectTab(..) from the public API
  • Add flow definition file for the element API

v1.0.0...v2.0.0

Assets 2
May 7, 2019
You can’t perform that action at this time.