Nihilist Postmodern Mistake

    @github/tab-container-element
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    <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" tabindex="-1">Tab two</button>
        <button type="button" role="tab" tabindex="-1">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.

    Keywords

    none

    Install

    npm i @github/tab-container-element

    DownloadsWeekly Downloads

    1,176

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    12.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32