- Convert project to TypeScript (#25)
Assets
2
Assets
2
- Add type to HTMLElementTagNameMap in typescript declaration file (#22)
Assets
2
Assets
2
<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.relatedTargetis 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.relatedTargetis 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
<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.relatedTargetis 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.relatedTargetis 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
PreviousNext