Tab Group
<esp-tab-group>
A tabbed interface that groups multiple
esp-tab elements. The tab strip is
generated automatically from each child's label attribute.
Only one tab panel is visible at a time.
Pre-selected tab
Set active on a child esp-tab to make it the initially
visible panel:
Disabled tab
Individual tabs can be disabled:
Disabled group
Set disabled on the group to disable all tabs at once:
Color variants
Listening for tab changes
Slots
<esp-tab-group> has a slot:
Default
Place esp-tab elements in the default slot.
Attributes
<esp-tab-group> has the following attributes:
disabled
disabled has a default value of false.
Disables all tabs in the group, preventing any tab from being selected.
Methods
<esp-tab-group> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-tab-group> emits the following events:
esp-tab-changed
esp-tab-changed is of type CustomEvent<{ index: number; label: string }>.
Fired when the active tab changes. The detail contains the index and label of the newly active tab.
CSS Parts
<esp-tab-group> has the following CSS parts:
tab-list
The tab strip container.
tab-button
Each individual tab button in the strip.
panels
The panel area below the tab strip.
CSS Properties
<esp-tab-group> has the following CSS properties:
--esp-tab-color-border
Border color of the tab group container.
--esp-tab-color-background
Background color of the overall component.
--esp-tab-color-strip-background
Background color of the tab strip.
--esp-tab-color-button-hover
Tab button hover background.
--esp-tab-color-button-active
Active tab button background.
--esp-tab-color-text
Text color for tab buttons.
--esp-tab-size-padding
Padding inside the panel area and tab buttons.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).