Tabs

About

Without JavaScript the panels are ordinary stacked sections, and links used as tabs jump to them. While scripts are enabled but Tabs hasn't loaded yet, the shipped stylesheet shows only the first panel, so the page doesn't jump when it does. When another tab starts selected, through aria-selected="true" or data-tabs-default-tab, write data-tab-panel="active" on its panel too: the stylesheet shows that panel instead, and Tabs selects it when no tab has aria-selected="true". CSS can't match a tab to its panel, so without the marker the first panel shows until Tabs mounts. If Tabs fails to load, every panel shows again; if it is never registered, the other panels stay hidden.

Once mounted, Tabs follows the WAI-ARIA tabs pattern: arrow keys, Home and End move focus between tabs, inactive panels get the hidden attribute, and a newly chosen panel fades in unless the user prefers reduced motion. Unmounting puts the markup back as it was.

Deep links keep working: when the address names a panel, or an element inside one, Tabs selects that panel's tab when it mounts and whenever the hash changes, ahead of aria-selected and the default tab. In nested tab sets, both the outer and inner tabs holding it are selected. Choosing a tab doesn't change the address.

Usage

Register the component and the framework loads it the first time a page contains [data-tabs].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-tabs]', () => import('@parallelogram-js/core/components/Tabs'));
app.run();

The framework is optional. Tabs.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Tabs from '@parallelogram-js/core/components/Tabs';

Tabs.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/tabs.css';