Pixel UI/Navigation/Tabs

Tabs

Tabs whose highlight slides across with a dithered pixel trail.

<piix-tabs>WebGL

Everything you need to ship a loud landing page.

One script tag, or npm install piixpal.

Heroes, pricing, dashboards, 404 pages.

Free. Forever. MIT.

<piix-tabs>
  <div label="Overview"><p>Everything you need to ship a loud landing page.</p></div>
  <div label="Install"><p>One script tag, or npm install piixpal.</p></div>
  <div label="Examples"><p>Heroes, pricing, dashboards, 404 pages.</p></div>
  <div label="Pricing"><p>Free. Forever. MIT.</p></div>
</piix-tabs>

Palette

Each child with a label becomes a tab. Pick one and the lit block slides over on the GPU, leaving a trail of dithered pixels behind it.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just tabs (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/tabs.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-tabs>
      <div label="Overview"><p>Everything you need to ship a loud landing page.</p></div>
      <div label="Install"><p>One script tag, or npm install piixpal.</p></div>
      <div label="Examples"><p>Heroes, pricing, dashboards, 404 pages.</p></div>
      <div label="Pricing"><p>Free. Forever. MIT.</p></div>
    </piix-tabs>
  );
}

Usage

<piix-tabs>
  <div label="Overview"><p>Everything you need to ship a loud landing page.</p></div>
  <div label="Install"><p>One script tag, or npm install piixpal.</p></div>
  <div label="Examples"><p>Heroes, pricing, dashboards, 404 pages.</p></div>
  <div label="Pricing"><p>Free. Forever. MIT.</p></div>
</piix-tabs>

API reference

Attribute	What it does	Default
`selected`	which tab is open, from 0	`0`
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`lime`
`pixel`	size of one pixel, in px	`3`

Events

Event	When
`change`	`detail.index` and `detail.label`

Accessibility

A proper tab list: arrow keys, Home and End move between tabs.
The highlight jumps instead of sliding with reduced motion.