e8-tabs
Updated on Sep 18, 2025 6 minutes to readA flexible and responsive tabs component for organizing content into multiple sections with configurable header placement, optional fixed height, bordered styles, and validation indicators.
Overview
e8-tabs allows you to create a tabbed interface, with each tab represented by an e8-tab component.
It handles dynamic tab activation, resizing, scrolling, and emits events when the active tab changes.
The tab header can be placed on any side of the content. Tabs containing invalid fields are highlighted automatically.
Content for Tab 1
- Item A
- Item B
Content for Tab 2 with different content height.
Additional paragraph to make it taller.
Short content for Tab 3.
<e8-tabs
height="200px"
bordered
>
<e8-tab
name="tab1"
title="Tab 1"
>
<p>Content for Tab 1</p>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
</e8-tab>
<e8-tab
name="tab2"
title="Tab 2"
>
<p>Content for Tab 2 with different content height.</p>
<p>Additional paragraph to make it taller.</p>
</e8-tab>
<e8-tab
name="tab3"
title="Tab 3"
>
<p>Short content for Tab 3.</p>
</e8-tab>
</e8-tabs>Properties
| Property | Description | Type | Default |
|---|---|---|---|
| bordered | Adds border styling to the tabs container. | boolean | true |
| height | Fixed height of the tabs container. Accepts any valid CSS dimension (e.g., 300px, 50%). | string | — |
| position | Places the tab header on the top, right, bottom, or left side of the content. | string | 'top' |
Slots
| Slot | Description |
|---|---|
| default | Container for the content of the tabs. Each child should be an e8-tab component. |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-change-tab | Called when a tab is activated from the header or by activateTab(). Receives the tab name and component instance separately. | name: string | null | undefined, tab: e8-tab instance | undefined |
Events Details
On Change Tab
Called when a tab is activated from the header or through activateTab(). The handler receives two positional arguments:
name— the active tab’s name. It isundefinedfor an unnamed tab andnullwhen there is no active tab.tab— the active e8-tab component instance, orundefinedwhen there is no active tab.
Selecting a fallback tab automatically, for example after removing or hiding the active tab, does not call this handler.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('onChangeTab', (name, tab) => { console.log('Tab changed:', name, tab); });Copy this snippet into the Content section
<e8-tabs
height="200px"
bordered
on-change-tab="onChangeTab"
>
<e8-tab
name="tab1"
title="Tab 1"
>
<p>Content for Tab 1</p>
</e8-tab>
<e8-tab
name="tab2"
title="Tab 2"
>
<p>Content for Tab 3</p>
</e8-tab>
<e8-tab
name="tab3"
title="Tab 3"
>
<p>Content for Tab 3</p>
</e8-tab>
</e8-tabs>