Tabs
Tabs with automatic activation as web component - accessible and styleable.
Usage
Install with
npm install @bhdzllr/tabs
Example
Import the component in your JS file:
import { Tabs } from '@bhdzllr/tabs';
Example with title and aria-labelledby
:
<h1 id="jl-tablist-title">Justice League Members</h1>
<bhdzllr-tabs aria-labelledby="jl-tablist-title">
<button slot="tab">Batman</button>
<button slot="tab">Superman</button>
<button slot="tab">Wonder Woman</button>
<button slot="tab">The Flash</button>
<button slot="tab">Cyborg</button>
<button slot="tab">Aquaman</button>
<section slot="tabpanel">
<h2>Batman</h2>
<p>Content Batman</p>
</section>
<section slot="tabpanel">
<h2>Superman</h2>
<p>Content Superman</p>
</section>
<section slot="tabpanel">
<h2>Wonder Woman</h2>
<p>Content Wonder Woman</p>
</section>
<section slot="tabpanel">
<h2>The Flash</h2>
<p>Content The Flash</p>
</section>
<section slot="tabpanel">
<h2>Cyborg</h2>
<p>Content Cyborg</p>
</section>
<section slot="tabpanel">
<h2>Aquaman</h2>
<p>Content Aquaman</p>
</section>
</bhdzllr-tabs>
Example with aria-label
on web component.
It's also possible to use the component without CSS or JS for progressive
enhancement. Just add attribute hidden
to the buttons and in CSS make sure
they are visible with display: inline-block
. With that you have just
the tab panels without the buttons if JS is disabled and no tab buttons if
styling is disabled.
<bhdzllr-tabs wa-aria-label="Justice League Members">
<button slot="tab" hidden>Batman</button>
<button slot="tab" hidden>Superman</button>
<button slot="tab" hidden>Wonder Woman</button>
<button slot="tab" hidden>Cyborg</button>
<button slot="tab" hidden>Aquaman</button>
<section slot="tabpanel">
<h2>Batman</h2>
<p>Content Batman</p>
</section>
<section slot="tabpanel">
<h2>Superman</h2>
<p>Content Superman</p>
</section>
<section slot="tabpanel">
<h2>Wonder Woman</h2>
<p>Content Wonder Woman</p>
</section>
<section slot="tabpanel">
<h2>The Flash</h2>
<p>Content The Flash</p>
</section>
<section slot="tabpanel">
<h2>Cyborg</h2>
<p>Content Cyborg</p>
</section>
<section slot="tabpanel">
<h2>Aquaman</h2>
<p>Content Aquaman</p>
</section>
</bhdzllr-tabs>