edible-tabs
A tab panel component. Declare
<edible-tab label="…"> children — the parent builds
the accessible tablist automatically. Navigate between tabs with
ArrowLeft / ArrowRight, jump to first/last with
Home / End.
Basic
Overview
This is the overview tab. It is shown by default when the component loads.
Details
Additional details are shown here once the Details tab is activated.
History
A log of past events can be placed in this panel.
With rich content
Tab panels can contain any HTML — tables, forms, lists, and more.
| Name | Role | Status |
|---|---|---|
| Alice | Lead | |
| Bob | Engineer | |
| Carol | Designer |
- Email notifications — enabled
- Slack notifications — disabled
- Weekly digest — enabled
Many tabs
Tabs wrap naturally when they overflow the container width.
Content for Alpha.
Content for Beta.
Content for Gamma.
Content for Delta.
Content for Epsilon.
Content for Zeta.