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

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

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

```typescript
class GeneralPanelTab
```

## Description

The `GeneralPanelTab` class allows developers to extend the editor's "General" panel (typically found in the left sidebar) with custom tabs. Unlike standard [Controls](./Control.md) which are context-sensitive to the selected block, General Panel Tabs provide global functionality or settings that are accessible regardless of which block is currently selected.

## Import

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

## Properties

### api

Provides access to editor functionalities specific to this tab instance.

```typescript
public api!: GeneralPanelTabApi
```

#### Type

[GeneralPanelTabApi](../api/GeneralPanelTabApi.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 tabs

***

### getIcon()

Retrieves the icon representing this tab in the general 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 General 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 general 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 global tab state synchronization with the document

***

### onDestroy()

Optional cleanup hook called when the general panel tab is being destroyed.

```typescript
public onDestroy(): void
```

#### Usage Notes

* Clean up event listeners, timers, or other resources