<snappy-tabs>
A typing element that's easy to use and customize. 0.85kb (brotli).
Demo
Why Make Another Tab/Accordion Element?
The short answer: accessibility. This component creates tabs and accordions using fully-semantic <details> and <summary> elements, which are very accessible. It's also tiny.
Features
- Tab and Accordion views using
type="tabs" or type="accordion".
- Breakpoint-based view switching using
breakpoint="768px" (provide unit and value).
- Floating tab indicator.
- Directional tab animations, respecting
prefers-reduced-motion media query.
- Part selectors for easy customization.
Installation
Option 1: As a package.
npm i @snappywc/tabs
import '@snappywc/tabs'
Option 2: In your markup.
<script type="module">
import '//unpkg.com/@snappywc/tabs'
</script>
Usage
It's really, really easy.
| Slot | Description |
|---|
| tab | The tab or accordion label. |
| panel | The tab or accordion panel. |
Example
<snappy-tabs type="tabs">
<!-- tab 1 -->
<h3 slot="tab">Tab 1</h3>
<div slot="panel">
<h4>Panel 1</h4>
<p>Panel 1 content.</p>
</div>
<!-- tab 2 -->
<h3 slot="tab">Tab 2</h3>
<div slot="panel">
<h4>Panel 2</h4>
<p>Panel 2 content.</p>
</div>
<!-- tab 3 -->
<h3 slot="tab">Tab 3</h3>
<div slot="panel">
<h4>Panel 3</h4>
<p>Panel 3 content.</p>
</div>
</snappy-tabs>
Customization
The default styles and part selectors for this element were carefully considered to be as minimal and un-opinionated as possible.
Parts
The following parts are available for styling.
| Part | Description |
|---|
| tab | The tab or accordion label. |
| panel | The tab or accordion panel. |
| indicator | The floating tab indicator. |
Example
snappy-tabs::part(tab) {
text-align: center;
}
snappy-tabs::part(indicator) {
background: darkslateblue;
}
CSS Variables
The following variables are available for styles
- --border-color
- --border-width
- --indicator-color
- --indicator-width
