Tabs
The parts of one page or record, one shown at a time. Specification: docs/components/tabs.md
Basics
In-page tabs: a .canon-tabs around a named strip (role="tablist") of tab buttons and their panels. Click a tab, or use the arrow keys (Home and End to the ends); the strip is one Tab stop, then the panel. The strip is a track as wide as its tabs; a raised card marks the current one and glides to the next. Not a Segmented Control: that sets a value, Tabs show a part.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Emails of INV-2041.
Links
When each part has its own address (/invoices/2041/payments), the tabs are links: a named <nav class="canon-tabs-list">, the current one aria-current="page". No tab roles: they go somewhere. They work without JavaScript.
Sharing the width
data-fill: the tabs share the strip equally. Best with few tabs of similar length.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Icons and counts
An icon before a tab's text, and a Count after it (with what it counts, visually hidden: "14 new").
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Emails of INV-2041.
On a record's page
Under a Page Header, the record's parts.
INV-2041
OverdueGlobex Corporation · Due 3 October · €12,400
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Emails of INV-2041.
Narrow
Tabs that don't fit go into a More menu, from the last, one at a time; the current tab always stays. Choose one from the menu and it takes its place. Drag the frame's corner to try it.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Emails of INV-2041.
Attachments of INV-2041.
Settings of INV-2041.
Sizes
data-size on the strip or a container: sm, md, lg.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Edge cases
Right to left, the tabs run from the right and the arrow keys follow. A tab that can't be chosen yet is aria-disabled="true": still announced, skipped by the arrows. Icons only (data-display="icon"), each keeps its text as its name.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Overview of INV-2041.
Payments of INV-2041.
Activity of INV-2041.
Notes of INV-2041.
Emails of INV-2041.