An accessible tab container element with keyboard support.
MIT License
Bot releases are visible (Hide)
https://github.com/github/tab-container-element/compare/v3.0.9...v3.1.0
https://github.com/github/tab-container-element/compare/v3.0.8...v3.0.9
https://github.com/github/tab-container-element/compare/v3.0.7...v3.0.8
https://github.com/github/tab-container-element/compare/v3.0.5...v3.0.6
https://github.com/github/tab-container-element/compare/v3.0.4...v3.0.5
Published by koddsson about 5 years ago
A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.
$ npm install @github/tab-container-element
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>
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.Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
Published by koddsson about 5 years ago
A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.
$ npm install @github/tab-container-element
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>
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.Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
https://github.com/github/tab-container-element/compare/v3.0.3...v3.0.4
https://github.com/github/tab-container-element/compare/v3.0.2...v3.0.3
npm update
4ec186ehttps://github.com/github/tab-container-element/compare/v3.0.1...v3.0.2
https://github.com/github/tab-container-element/compare/v3.0.0...v3.0.1
https://github.com/github/tab-container-element/compare/v2.0.0...v3.0.0
selectTab(..)
from the public APIhttps://github.com/github/tab-container-element/compare/v1.0.0...v2.0.0
Published by muan over 5 years ago
tabcontainer:tabchange
-> tab-container-change