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

---

getControls()

Version Availability

This method is available starting from v3.8.0

Returns the normalized control configuration objects in this tab.

public getControls(): SettingsPanelTabControl[]

Returns

SettingsPanelTabControl[] - Array of control configuration objects

---

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(
  control: string | SettingsPanelTabControlConfig,
  position: number
): SettingsPanelTab

Parameters

Name	Type	Description
control	string | SettingsPanelTabControlConfig	Control ID or control configuration object
position	number	Position index

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(
    {
      id: 'padding',
      class: 'custom-grid-cell',
      withFullHeight: true
    },
    1
  );

---

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']

SettingsPanelTabControlConfig

Version Availability

This interface is available starting from v3.8.0

interface SettingsPanelTabControlConfig {
  id: string;
  class?: string;
  withFullHeight?: boolean;
}

Properties

Property	Type	Description
id	string	Control identifier
class	string	Optional CSS class applied by the editor layout
withFullHeight	boolean	Expands the control to full available tab height when supported