e8-tab
Updated on Sep 18, 2025 5 minutes to readA single tab panel component to be used inside an e8-tabs container.
Overview
e8-tab represents one tab with optional title, padding, and visibility.
The active tab is managed by the parent e8-tabs component.
<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>
🔽 Show more
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 |
|---|---|---|---|
| name | Unique identifier for the tab. | string | — |
| padding | Padding inside the tab content. Accepts any valid CSS padding value. | string | '1rem' |
| title | Optional title for the tab. | string | — |
| visible | Controls whether the tab is visible. Hidden tabs are not rendered. | boolean | true |
Slots
| Slot | Description |
|---|---|
| default | Content of the tab panel. Can include any HTML or components. |