🚀  Astro — Tabs bar + panels


A tabs bar + panels component which works entirely without JS. Supports height equalization and automatic vertical scroll bar for tabs bar.

Keywords:

  • astro
  • astro-component
  • tabs
  • ui
  • no-js
  • native
  • interactive
  • vanilla
  • css
  • html

Component live demo

WITH "tallest" panel equalization

Use panel-<n>-tallest.

Panel 1

Hello world

Panel 2

Panel 3

Heya


WITHOUT "tallest" equalization

The content below this component will reflow depending on panel content height.

Panel 1

Hello world

Panel 2

Panel 3

Hé Hô

Hé Hô

Hé Hô

Unstyled

Panel 1

Panel 2

Panel 3

🚀  Astro — Tabs bar + panels

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

A tabs bar + panels component which works entirely without JS.
Supports height equalization and automatic vertical scroll bar for tabs bar.

Note: It uses the :has() CSS selector under the hood.



📦  Installation

pnpm i astro-tabs

🛠  Usage

WITHOUT "tallest" equalization

---
import { Tabs } from 'astro-tabs';
// ...
---

<Tabs class="pass-your-own-class" class:list={['pass-your-class-list']}>
  <Fragment slot="tab-1">Tab 1</Fragment>
  <Fragment slot="tab-2">Tab 2</Fragment>
  <Fragment slot="tab-3">Tab 3</Fragment>

  <Fragment slot="panel-1">
    <h2>Panel 1</h2>
    <p>Hello world</p>
  </Fragment>

  <Fragment slot="panel-2">
    <h2>Panel 2</h2>

    <img
      height="400"
      src="https://res.cloudinary.com/dzfylx93l/image/upload/v1664340439/astro-takeoff-1_ecdfxf.gif"
    />
  </Fragment>

  <Fragment slot="panel-3">
    <h2>Panel 3</h2>
  </Fragment>
</Tabs>

WITH "tallest" panel equalization, use panel-<n>-tallest

<Tabs>
  <Fragment slot="tab-1">Tab 1</Fragment>
  <Fragment slot="tab-2">Tab 2</Fragment>
  <Fragment slot="tab-3">Tab 3</Fragment>

  <Fragment slot="panel-1">
    <h2>Panel 1</h2>
    <p>Hello world</p>
  </Fragment>

  <!-- v———————————————————————————————————— This is the tallest panel -->
  <Fragment slot="panel-2-tallest">
    <h2>Panel 2</h2>
    <img
      height="400"
      src="https://res.cloudinary.com/dzfylx93l/image/upload/v1664340439/astro-takeoff-1_ecdfxf.gif"
    />
  </Fragment>

  <Fragment slot="panel-3">
    <h2>Panel 3</h2>
    <p>Heya</p>
  </Fragment>
</Tabs>

Styling

.tab {
  color: white;
  padding: 1rem;
  background-color: teal;
  border: 1px solid cyan;

  &:hover {
    color: black;
    background-color: cyan;
  }
}

.tab-selector:checked ~ .tab {
  color: black;
  background: turquoise;
}

.panel {
  padding: 1rem;
  background-color: lightcyan;
  border: 3px solid darkcyan;
}

Or use :global(.tab),… in scoped styles.

🎉  Result

<div class="_tabs_1il72_16 tabs">
  <style>
    ._tabs_1il72_16:has(._radio_1il72_32-1:checked) ._panel_1il72_8-1,
    ._tabs_1il72_16:has(._radio_1il72_32-2:checked) ._panel_1il72_8-2,
    ._tabs_1il72_16:has(._radio_1il72_32-3:checked) ._panel_1il72_8-3 {
      visibility: visible;
      display: inline-block;
    }
  </style>

  <nav class="_tab-bar_1il72_3">
    <div class="tab-wrapper tab-1">
      <input
        class="_radio_1il72_32 _radio_1il72_32-1 tab-selector"
        type="radio"
        name="3af997a5-693f-40db-a0c6-ba63359e27a8"
        checked="true"
        id="3af997a5-693f-40db-a0c6-ba63359e27a8-1"
      />
      <label
        class="tab _tab_1il72_3"
        for="3af997a5-693f-40db-a0c6-ba63359e27a8-1"
      >
        <div>Tab 1</div>
      </label>
    </div>

    <!-- ... x3 -->
  </nav>

  <div class="_panels_1il72_8">
    <div class="_panel_1il72_8 false _panel_1il72_8-1 panel">
      <h2>Panel 1</h2>
      <p>Hello world</p>
    </div>

    <!-- ... x3 -->
  </div>
</div>

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.1.7 (2022-11-19)

Note: Version bump only for package astro-tabs

0.1.6 (2022-10-23)

Bug Fixes

  • class list prop. + remove extra div (60318a9)

0.1.5 (2022-10-23)

Bug Fixes

  • simplify inline styles + correct spread props (a0e2f2b)

0.1.4 (2022-10-23)

Bug Fixes

  • simplify inline styles + correct spread props (a0e2f2b)

0.1.3 (2022-10-17)

Bug Fixes

  • import path, disable og image, tabs props (cf4d2f5)

0.1.2 (2022-10-17)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)

0.1.1 (2022-10-15)

Note: Version bump only for package astro-tabs

0.1.0 (2022-10-13)

Features

Bug Fixes

  • update video url in docs (cdacac6)
...

⚠️  Having an issue? / 🗣   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.