Tabs
Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
Kit parts
Nosepiece tabs
A tab set for three to five views, worked as a microscope turret: the chosen lens swings into line above the panel, and the panel changes once it has clicked home.
Anatomy
The authored tablist and panels are gathered by the script. Each tab becomes a tapered barrel hung from a zero size point at the disc centre, with its own length a little different from its neighbours; its round label collar is turned back by the same angle as the barrel, so the words stay level while the metal goes round. A drag reads the pointer angle around the disc and snaps to the nearest detent.
Variants
- Four tabs
- Five tabs
- One out of action
States
- Chosen · Profile
- Chosen · Billing
- Mid-turn
- Capped lens
- Focus on a lens
Props and options
| Name | Kind | Description |
|---|---|---|
| data-value | attribute | The value the change event reports. Falls back to the button value, then its id. |
| change | event | Fires on the set after the chosen panel is shown. Bubbles. |
| nosepieceTurn(from, to, count, step) | function | Pure: the shortest signed angle from one detent to another. A half turn is a tie and is taken clockwise. |
| NOSEPIECE_LENGTHS | constant | The five barrel lengths as fractions of the disc, in tab order, so no two objectives are quite the same length. |
| disabled | attribute | The lens is drawn with a dust cap and no key or press reaches it. |
| Left · Right · Home · End | keyboard | Move the focus and choose, skipping a capped lens. |
| pointer drag | pointer | The turret follows the pointer and settles into the nearest detent on release. |
Usage notes
Press a lens or its label, use the arrow keys, or drag the turret round. It clicks into the nearest lens, and the panel changes when it lands.
Accessibility
- The tabs keep the WAI-ARIA tabs pattern: one Tab stop for the list, arrows inside it, and each panel linked both ways.
- Focus rings the round label collar rather than the whole barrel, and stays visible while the turret turns.
- A capped lens is skipped by the arrow keys and by Home and End, and it cannot be pressed.
- At narrow widths the stamped labels fade out but still name their buttons; the current label is printed under the turret.
- With reduced motion the panel changes at once, so no information is carried by the turn alone.
Related parts
Selector
One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
Swatch fan
A dropdown drawn as a paint swatch fan pinned on a rivet. The one blade it shows closed is the current choice, its tone and its printed name set once, nowhere else; a press swings the rest of the blades open from that same rivet, each stopped at its own angle, and picking one furls the fan again on the new choice. A real select carries the value and is the whole control with no script at all.