---
url: https://plugin.stripo.email/extensions/reference/controls/ModulesPanelTab.md
---
# ModulesPanelTab

::::tip Version Availability
This class is available starting from v3.7.0
::::

Core class for creating custom tabs in the "Modules" panel of the Stripo Email Editor.

```typescript
class ModulesPanelTab
```

## Description

The `ModulesPanelTab` class allows developers to extend the editor's "Modules" panel with custom tabs. These tabs are useful for module libraries, reusable content collections, or any custom module browsing experience.

## Import

```typescript
import { ModulesPanelTab } from '@stripoinc/ui-editor-extensions';
```

## Properties

### api

Provides access to editor functionalities specific to this tab instance.

```typescript
public api!: ModulesPanelTabApi
```

#### Type

[ModulesPanelTabApi](../api/ModulesPanelTabApi.md)

## Methods

### getId()

Retrieves the unique identifier for this tab.

```typescript
public getId(): string
```

#### Returns

`string` - Unique identifier for the tab

#### Usage Notes

* Must be unique across all registered modules panel tabs

***

### getIcon()

Retrieves the icon representing this tab in the modules panel header.

```typescript
public getIcon(): string
```

#### Returns

`string` - Icon key from the [IconsRegistry](../icons/IconsRegistry.md)

***

### getName()

Retrieves the display name of the tab shown to the user in the header hint.

```typescript
public getName(): string
```

#### Returns

`string` - Localized tab name

#### Usage Notes

* Displayed as a tooltip or label for the tab icon
* Use `this.api.translate()` for localization

***

### getTabIndex()

Retrieves the position/order of the tab in the Modules panel.

```typescript
public getTabIndex(): number
```

#### Returns

`number` - The index position (0-based)

***

### getTemplate()

Retrieves the HTML template string that defines the initial structure of the tab's content.

```typescript
public getTemplate(): string
```

#### Returns

`string` - HTML template

#### Usage Notes

* Defines the UI structure rendered when the tab is opened
* Can use standard HTML and [UI Elements](../../reference/constants/UIElementType.md)

***

### isEnabled()

Determines if the tab should be available for use in the editor.

```typescript
public isEnabled(): boolean
```

#### Returns

`boolean` - True if enabled. Defaults to `true`.

## Lifecycle Hooks

### onRender()

Optional hook called when the modules panel tab is initially rendered.

```typescript
public onRender(): void
```

#### Usage Notes

* Use for setup tasks like attaching event listeners to template elements
* Initialize UI state

***

### onDocumentChanged()

Lifecycle hook called when any part of the document template has changed.

```typescript
public onDocumentChanged(): void
```

#### Usage Notes

* Triggered frequently during editing
* Use for tab state synchronization with the document