PanelControl | Integrations

Getting started

<ps-panelcontrol> is a custom element that wraps PanelControl. It behaves exactly like a [data-panelcontrol] container: it connects its [aria-controls] triggers to a PanelSet, with keyboard navigation when it is a [role="tablist"].

IIFE (no build step)

Include the one bundled script. It exposes window.PanelControl and auto-registers all three custom elements: <ps-panel>, <ps-panelset>, <ps-panelcontrol>. Nothing else to call.

HTML

<script src="panelset.js"></script>

Module

One register() call defines <ps-panel>, <ps-panelset>, and <ps-panelcontrol>.

import { register } from 'panelset';
register();   // <ps-panel>, <ps-panelset>, <ps-panelcontrol>

Tab example

A tab strip as <ps-panelcontrol> over a <ps-panelset>. No init() call. Each custom element constructs itself on connect.

Features

Click a tab, or focus the strip and use the arrow keys.

HTML

<ps-panelcontrol role="tablist">
	<button role="tab" aria-controls="t-1" aria-selected="true">Features</button>
	<button role="tab" aria-controls="t-2">Pricing</button>
</ps-panelcontrol>

<ps-panelset>
	<div class="panel-wrapper">
		<div class="active" id="t-1" role="tabpanel">…</div>
		<div id="t-2" role="tabpanel" hidden>…</div>
	</div>
</ps-panelset>

Reaching the instance

The PanelControl instance is stored on the element as el.panelControl. Use it to lock or unlock tabs, or to activate one programmatically.

const control = document.querySelector('ps-panelcontrol').panelControl;
control.setTabState('t-2', 'disabled');
control.show('t-1');

Custom prefix

Pass a string to register() to change the element-name prefix for all three. The default is ps.

register();          // <ps-panel>, <ps-panelset>, <ps-panelcontrol>
register('solar');   // <solar-panel>, <solar-panelset>, <solar-panelcontrol>

It is safe to call multiple times; it skips any name that is already defined.

Web Component