`<bmx-tab-panel>`

One panel inside a bmx-tabs, and the whole of what an author writes: the tab's label is an attribute here, so there is no second element to keep in step with this one and no pair of ids to wire together.

6 properties · 0 events · 0 methods · 1 parts

Example

A panel is an ordinary element holding ordinary content. It shows when its tab is chosen.

badge takes any short string, not only a number.

Unreachable while it is disabled.

A panel is only ever inside a bmx-tabs: it carries the label the tab is drawn from, and the tabs element decides which one is showing.

Show markup

<div class="row">
  <bmx-tabs label="Deployment" style="max-inline-size: 40rem">
    <bmx-tab-panel label="Build">
      <p style="margin: 0">A panel is an ordinary element holding ordinary content. It shows when its tab is chosen.</p>
    </bmx-tab-panel>

    <bmx-tab-panel label="Test" badge="3 failing">
      <p style="margin: 0"><code>badge</code> takes any short string, not only a number.</p>
    </bmx-tab-panel>

    <bmx-tab-panel label="Release" disabled>
      <p style="margin: 0">Unreachable while it is disabled.</p>
    </bmx-tab-panel>
  </bmx-tabs>
</div>

<div class="row">
  <span class="note">
    A panel is only ever inside a <code>bmx-tabs</code>: it carries the label the tab is drawn from, and the tabs element
    decides which one is showing.
  </span>
</div>

<bmx-tabs>
  <bmx-tab-panel label="Overview">…</bmx-tab-panel>
  <bmx-tab-panel label="Members" badge="12">…</bmx-tab-panel>
  <bmx-tab-panel label="Billing" disabled>…</bmx-tab-panel>
</bmx-tabs>

WHY THE TAB IS NOT AN ELEMENT OF ITS OWN

Most libraries ship three elements - a group, a tab and a panel - and pair the last two by id. That is a fair design when the tabs and the panels are siblings in the same tree, and it is the wrong one here, because bmx-tabs draws its strip inside its own shadow root: a tab element written by the author could not carry aria-controls to a panel in another root, and the reference would resolve to nothing while looking entirely correct on screen. Reading the label from the panel keeps every reference on one side of the boundary - see bmx-tabs - and it removes the commonest authoring mistake in the pattern, which is a tab and a panel whose ids have drifted apart.

WHAT THIS ELEMENT DOES

Holds content and shows it when it is the chosen one. active is set by the parent; setting it by hand does not change which tab is selected, because the strip is drawn from the parent's own state. Choose a panel with the tabs element's value, or by pressing its tab.

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the panel currently showing. Set by `bmx-tabs`, and reflected so a stylesheet can reach it. It is the parent's to write: a panel that made itself active would leave the strip showing a different tab as selected.
`badge`	`badge`	`string`	—	A short count or status, rendered after the label on the tab.
`disabled`	`disabled`	`boolean`	`false`	Whether the tab can be chosen.
`icon`	`icon`	`string`	—	An inline SVG string, rendered before the label on the tab.
`label`	`label`	`string`	—	The text on this panel's tab.
`value`	`value`	`string`	—	What this panel is identified by in `value` and in the event. Optional: it falls back to the label and then to the panel's position, so a set of panels written with labels alone still switches, and still reports something a consumer can distinguish.

Slots

Slot	Description
`(default)`	The panel's content.

CSS shadow parts

Part	Description
`base`	The panel itself.

CSS custom properties

Property	Description
`--bmx-tab-panel-display`	How an active panel lays its content out. Block by default.