Tabs
Panels that share one region, switched by a list of tabs. State lives in Alpine on the root and is matched by value.
<x-atlas::tabs>
A hard-wearing oak worktop, finished by hand and cut to the millimetre.
40 mm solid European oak, matte hardwax oil, maximum span 3600 mm.
Made to order in about three weeks, delivered on a pallet to the kerb.
<x-atlas::tabs active="overview">
<x-atlas::tabs.list>
<x-atlas::tabs.item value="overview" label="Overview" />
<x-atlas::tabs.item value="specification" label="Specification" />
<x-atlas::tabs.item value="delivery" label="Delivery" />
</x-atlas::tabs.list>
<x-atlas::tabs.panel value="overview">
<p>A hard-wearing oak worktop, finished by hand and cut to the millimetre.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="specification">
<p>40 mm solid European oak, matte hardwax oil, maximum span 3600 mm.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="delivery">
<p>Made to order in about three weeks, delivered on a pallet to the kerb.</p>
</x-atlas::tabs.panel>
</x-atlas::tabs>
Tabs are four tags with one rule between them: active goes on the root,
variant goes on the list, and every item and panel is matched by value.
The root opens an Alpine scope holding active; items write to it on click,
Enter and Space, and panels read it with x-show. A typo in a
value shows as an empty region rather than an error, so keep the strings in one place.
Base variant
The default underline list suits page-level sections. Switch the list to
base for a compact tinted bar — it is the better choice inside a card or on a
colored band, where an underline has nothing to sit against.
€39 per month, cancel whenever you like.
€390 per year — two months on the house.
<x-atlas::tabs active="monthly">
<x-atlas::tabs.list variant="base">
<x-atlas::tabs.item value="monthly" label="Monthly" icon-name="" />
<x-atlas::tabs.item value="yearly" label="Yearly" icon-name="" />
</x-atlas::tabs.list>
<x-atlas::tabs.panel value="monthly">
<p>€39 per month, cancel whenever you like.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="yearly">
<p>€390 per year — two months on the house.</p>
</x-atlas::tabs.panel>
</x-atlas::tabs>
Vertical
vertical puts the tabs in a column beside the panel from 768px up and stacks them
above it below that. Use it when the labels are long, or when there are more of them than fit
across a line comfortably.
Managed servers in Amsterdam, with daily off-site backups and a staging environment per site.
Monthly core and plugin updates, run against a staging copy before anything reaches production.
A named contact, answers within four working hours, and out-of-hours cover for incidents.
<x-atlas::tabs active="hosting">
<x-atlas::tabs.list variant="vertical">
<x-atlas::tabs.item value="hosting" label="Hosting" icon-name="" />
<x-atlas::tabs.item value="maintenance" label="Maintenance" icon-name="" />
<x-atlas::tabs.item value="support" label="Support" icon-name="" />
</x-atlas::tabs.list>
<x-atlas::tabs.panel value="hosting">
<p>Managed servers in Amsterdam, with daily off-site backups and a staging environment per site.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="maintenance">
<p>Monthly core and plugin updates, run against a staging copy before anything reaches production.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="support">
<p>A named contact, answers within four working hours, and out-of-hours cover for incidents.</p>
</x-atlas::tabs.panel>
</x-atlas::tabs>
Icons
Items have no icon by default. Pass an icon-name to add one where it actually
distinguishes the tabs from each other.
[email protected] — answered on working days, usually within a few hours.
+31 20 123 4567 — Monday to Friday, 09:00 to 17:00.
Keizersgracht 1, 1015 CJ Amsterdam.
<x-atlas::tabs active="email">
<x-atlas::tabs.list>
<x-atlas::tabs.item value="email" label="Email" icon-name="far-envelope" />
<x-atlas::tabs.item value="phone" label="Phone" icon-name="fas-phone" />
<x-atlas::tabs.item value="post" label="Post" />
</x-atlas::tabs.list>
<x-atlas::tabs.panel value="email">
<p>[email protected] — answered on working days, usually within a few hours.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="phone">
<p>+31 20 123 4567 — Monday to Friday, 09:00 to 17:00.</p>
</x-atlas::tabs.panel>
<x-atlas::tabs.panel value="post">
<p>Keizersgracht 1, 1015 CJ Amsterdam.</p>
</x-atlas::tabs.panel>
</x-atlas::tabs>
x-show and x-cloak, so every panel is briefly
visible until Alpine boots unless the host page ships a [x-cloak] { display: none }
rule. The items also lack aria-controls and the panels lack aria-labelledby
and an id, so the tab-to-panel relationship is not exposed to assistive technology;
add those attributes yourself where it matters.
Related components
Reference
<x-atlas::tabs>
-
- Name
active- Type
- string
- Description
- Value of the tab shown first. Must match the value of one item and one panel, or the region starts empty.
Slots
-
- Name
default- Type
- slot
- Description
- The tab list and the panels. Both read the same Alpine scope, so they must stay inside this element.
<x-atlas::tabs.list>
-
- Name
variant- Type
- underline | base | vertical
- Default
- default: underline
- Description
- Layout and styling of the list. base wraps its children in a scrolling row; vertical stacks the tabs beside the panel from 768px up.
Slots
-
- Name
default- Type
- slot
- Description
- The tab items.
<x-atlas::tabs.item>
-
- Name
value- Type
- string
- Description
- Identifies the tab. Selecting it sets the shared active value, and the panel with the same value is shown.
-
- Name
label- Type
- string
- Description
- Tab label. Falls back to the slot when empty.
-
- Name
icon-name- Type
- string
- Default
- default: null
- Description
- Icon before the label. No icon is rendered by default; pass a name to show one.
Slots
-
- Name
default- Type
- slot
- Description
- Used as the label when the label prop is not set.
<x-atlas::tabs.panel>
-
- Name
value- Type
- string
- Description
- The item value this panel belongs to. Shown only while it is the active one.
Slots
-
- Name
default- Type
- slot
- Description
- The panel content.