ModulesPanelTab

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.

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

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

Properties

api

Provides access to editor functionalities specific to this tab instance.

public api!: ModulesPanelTabApi

Type

ModulesPanelTabApi

Methods

getId()

Retrieves the unique identifier for this tab.

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.

public getIcon(): string

Returns

string - Icon key from the IconsRegistry

---

getName()

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

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.

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.

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

---

isEnabled()

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

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.

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.

public onDocumentChanged(): void

Usage Notes

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