mmo-tabs

Tabs over panes that are written flat: a tab carries target-id, the pane it shows carries that id, so a pane can be anything — including another mmo-tabs.

Documentation
Builder

Usage

The tabs and the panes are slotted separately, so the markup never nests one inside the other. The first tab is the one that opens, unless one carries class="active".

The strip is the design system's, not a copy of it: a segmented track with the active tab filled with the accent, the same thing .tabs paints in a page. class="line" switches to the quiet form — tabs on a rule, the active one breaking it — for a strip that navigates rather than switches.

Examples

Tab 1
Content 1
Tab 2
Content 2
Tab 3
Content 3

This page is itself a pair of tabs, and the example above is a second pair inside one of its panes: each element only ever looks at its own children.

Tags

<#custom element> <#tabs>