e8-tabs
Updated on Sep 18, 2025 5 minutes to readA flexible and responsive tabs component for organizing content into multiple sections with optional fixed height and bordered styles.
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, and emits events when the active tab changes.
Supports optional fixed height, bordered styles, and custom event callbacks.
<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>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.
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 | '' |
Slots
| Slot | Description |
|---|---|
| default | Container for the content of the tabs. Each child should be an e8-tab component. |
Events
| Event | Description |
|---|---|
| on-change-tab | Triggers when the active tab changes. |
Events Details
On Change Tab
Triggered when the active tab is changed.
Receives an object containing:
• name — the name of the newly active tab.
• tab — the e8-tab component instance that became active.
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>