SettingsPanelTab

Configuration class for organizing controls within settings panel tabs.

class SettingsPanelTab

Description

SettingsPanelTab represents a single tab within a block's settings panel. It defines which controls appear in the tab, their order, and the tab's label. Tabs help organize related controls together, making the settings interface more intuitive and manageable for users.

This class provides a fluent API for configuring tabs, allowing you to dynamically add, remove, and reorder controls as needed.

Import

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

Constructor

constructor(tabId: string, controlsIds: string[])

Parameters

Name	Type	Description
tabId	string	Identifier for the tab (e.g., 'settings', 'styles', 'data')
controlsIds	string[]	Array of control IDs to display in this tab

Example

const settingsTab = new SettingsPanelTab(SettingsTab.SETTINGS, [
    GeneralControls.TEXT_COLOR,
    'my-padding-control'
]);

Methods

getTabId()

Returns the identifier of this tab.

public getTabId(): string

Returns

string - The tab identifier

---

getLabel()

Returns the display label for this tab.

public getLabel(): string | undefined

Returns

string | undefined - The tab label, or undefined if not set

---

getControlsIds()

Returns the array of control IDs in this tab.

public getControlsIds(): string[]

Returns

string[] - Array of control identifiers

---

withLabel()

Sets a custom display label for the tab.

public withLabel(label: string): SettingsPanelTab

Parameters

Name	Type	Description
label	string	The label to display on the tab

Returns

SettingsPanelTab - The tab instance for method chaining

Example

const tab = new SettingsPanelTab('settings', ['color', 'size'])
  .withLabel('Appearance');

---

addControl()

Adds a control to the tab at the specified position.

public addControl(controlId: string, position: number): SettingsPanelTab

Parameters

Name	Type	Description
controlId	string	The ID of the control to add
position	number	Position index (-1 for end, 0 for beginning)

Returns

SettingsPanelTab - The tab instance for method chaining

Position Behavior

• position < 0: Adds control at the beginning
• position > array.length: Adds control at the end
• 0 <= position <= array.length: Inserts at specified index

Example

const tab = new SettingsPanelTab('settings', ['color'])
  .addControl('size', 0)      // Add at beginning: ['size', 'color']
  .addControl('padding', 1)   // Insert at index 1: ['size', 'padding', 'color']

---

deleteControl()

Removes a control from the tab.

public deleteControl(controlId: string): void

Parameters

Name	Type	Description
controlId	string	The ID of the control to remove

Usage Notes

• Does nothing if the control ID is not found
• Maintains the order of remaining controls

Example

const tab = new SettingsPanelTab('settings', ['color', 'size', 'padding']);
tab.deleteControl('size'); // Result: ['color', 'padding']