Class: Tab

new Tab(parent, propsopt)

Represents a tab component with multiple customizable properties and events.

Parameters:

Name	Type	Attributes	Description
`parent`	HTMLElement		HTML element that is going to be the parent of the component.
`props`	TComponents.TabProps	<optional>	The properties object.

Source: as-tab.js, line 50

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

Extends

TComponents.Menu_A

Members

activeTab :string

Sets the active tab by its display name.

Type:

string

Deprecated: Use `activeViewName` instead.
Source: as-tab.js, line 157

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

tab.activeTab = 'Tab 2'; // Sets the active tab to 'Tab 2'

activeViewIndex :number

Sets the active tab view index and updates the active tab in the tab container.

Type:

number

Source: as-tab.js, line 260

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

tab.activeViewIndex = 1; // Sets the active tab to the second tab

activeViewIndexX :number

Sets the active tab view index and updates the active tab in the tab container. This will update the tab container but will NOT trigger the onchange event. Recommended for internal or programmatic updates, where change notification is not desired.

Type:

number

Source: as-tab.js, line 311

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

tab.activeViewIndexX = 1;

activeViewName :string

Sets the active tab by its display name.

Type:

string

Source: as-tab.js, line 212

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

tab.activeViewName = 'Tab 2'; // Sets the active tab to 'Tab 2'

tabPosition :string

Sets the tab bar position. The tab position can be top, left, or right.

Type:

string

Source: as-tab.js, line 366

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

tab.tabPosition = 'left'; // Sets the tab position to the left

views :Array.<any>

An array of Tab's views, each containing properties like id,name, content, active, and child.

Type:

Array.<any>

Overrides: TComponents.Menu_A#views
Source: as-tab.js, line 105

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

if(tab.views.length >= 1){
 console.log(tab.views[0].name); // Outputs: 'Tab 1'
};

Methods

addTab(tab) → {void}

Adds a new tab to the component. Experimental interfaces are not recommended for use.

Parameters:

Name Type Description

tab

object

The tab object

Properties

Name	Type	Attributes	Description
`name`	string		The name of the tab
`content`	string		The content of the tab
`extra`	object	<optional>	Additional optional properties (e.g. icon, children)

Source: as-tab.js, line 620
To Do: This is an experimental interface and may change at any time; it is not recommended to use it in the current version.

Returns:

Type:: void

Examples

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

// Add a new tab.
const v1 = {name: 'Tab 3', content: 'test-1-001'};
tab.addView(v1);

const div1 = document.createElement('div');
div1.textContent = 'Hello world';
div1.style.fontSize = '96px';
div1.style.fontWeight = 'bold';
div1.style.textAlign = 'center';

const v2 = {name: 'Tab 4', content: div1};
tab.addView(v2);

(protected) defaultProps() → {TComponents.TabProps}

Returns the default properties of the tab component.

Overrides: TComponents.Menu_A#defaultProps
Source: as-tab.js, line 406

Returns:

Default properties.

Type:: TComponents.TabProps

getProps() → {object}

Gets the properties of the tab component.

Overrides: TComponents.Menu_A#getProps
Deprecated: No longer supported interfaces.
Source: as-tab.js, line 574

Returns:

The properties object

Type:: object

Example

const tab = new TComponents.Tab(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'Tab 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
   {
      name: 'Tab 2',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the component.
await tab.render();

const props = tab.getProps();
console.log(props.views); // Outputs the views array with content

(protected) handleTabClick(e) → {void}

Handles the tab click event.

Parameters:

Name	Type	Description
`e`	Event	The event object.

Source: as-tab.js, line 919

Returns:

Type:: void

hideTab(options) → {void}

Hides a tab by matching its name or content.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	The tab id.
`content`	string \| HTMLElement	<optional>	The tab content id or content object.

Source: as-tab.js, line 760

Returns:

Type:: void

Example

// Hide the tab 2.
tab.hideTab({name: 'Tab 2'});

hideTabByIndex(index) → {void}

Hides a tab by its index.

Parameters:

Name	Type	Description
`index`	number	Zero-based tab index.

Source: as-tab.js, line 777

Returns:

Type:: void

Example

// Hide the tab 1.
tab.hideTabByIndex(0);

mapComponents() → {object}

Maps components to their identifiers.

Overrides: TComponents.Menu_A#mapComponents
Source: as-tab.js, line 499

Returns:

Type:: object

markup() → {string}

Returns the HTML markup for the tab component.

Overrides: TComponents.Menu_A#markup
Source: as-tab.js, line 489

Returns:

The HTML markup

Type:: string

onInit() → {void}

Initializes the tab component, setting up event handlers and tab container.

Overrides: TComponents.Menu_A#onInit
Source: as-tab.js, line 460

Throws:

If the component fails to initialize.
Type Error

Returns:

Type:: void

onRender() → {void}

Renders the tab component, applying styles and attaching event listeners.

Overrides: TComponents.Menu_A#onRender
Source: as-tab.js, line 518

Throws:

If the component fails to render.
Type Error

Returns:

Type:: void

removeTab(options) → {void}

Removes a tab by id, content, or name. Lookup priority:

id
content
name

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	The tab id.
`content`	string \| HTMLElement	<optional>	The tab content id or content object.
`name`	string	<optional>	The tab display name.

Source: as-tab.js, line 680

Returns:

Type:: void

Example

// remove the tab 2.
tab.removeTab({name: 'Tab 2'});

removeTabByIndex(index) → {void}

Removes a tab by its index in the views array.

Parameters:

Name	Type	Description
`index`	number	Zero-based tab index.

Source: as-tab.js, line 704

Returns:

Type:: void

Example

tab.removeTabByIndex(1);

(protected) setActiveView() → {void}

Activates the view at the specified index.

Source: as-tab.js, line 889

Throws:

If the tab container is not initialized or the target view cannot be found.
Type Error

Returns:

Type:: void

(protected) setTabContainerBorder() → {void}

Applies the background color and rounded-corner border to the tab container based on the configured tab position.

Source: as-tab.js, line 851

Returns:

Type:: void

showTab(options) → {void}

Shows a tab by matching its name or content.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Attributes	Description
`id`	string	<optional>	The tab id.
`content`	string \| HTMLElement	<optional>	The tab content id or content object.

Source: as-tab.js, line 720

Returns:

Type:: void

Example

// Hide the tab 1.
tab.hideTabByIndex(0);

// Show the tab 1;
tab.showTab({name: 'Tab 1'});

showTabByIndex(index) → {void}

Shows a tab by its index.

Parameters:

Name	Type	Description
`index`	number	Zero-based tab index.

Source: as-tab.js, line 740

Returns:

Type:: void

Example

// Hide the tab 1.
tab.hideTabByIndex(0);

// Show the tab 1;
tab.showTabByIndex(0);

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-tab.js, line 984

Returns:

Type:: void

Example

TComponents.Tab.loadCssClassFromString(`
  .tc-tab {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}`);