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 51

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.
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 150

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.
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 253

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.
tab.render();

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

activeViewName :string

Sets the active tab by its display name.

Type:

string

Source: as-tab.js, line 205

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.
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 300

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.
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 98

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.
tab.render();

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

Methods

(protected) _handleTabClick(e) → {void}

Handles the tab click event.

Parameters:

Name	Type	Description
`e`	Event	The event object.

Source: as-tab.js, line 613

Returns:

Type:: void

(protected) _setActiveView() → {void}

Activates the view at the specified index.

Source: as-tab.js, line 594

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 566

Returns:

Type:: void

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	Description
`name`	string	The name of the tab
`content`	string	The content of the tab

Source: as-tab.js, line 552
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

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

Returns the default properties of the tab component.

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

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 506

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.
tab.render();

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

mapComponents() → {object}

Maps components to their identifiers.

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

Returns:

Type:: object

markup() → {string}

Returns the HTML markup for the tab component.

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

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 393

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 452

Throws:

If the component fails to render.
Type Error

Returns:

Type:: void

(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 675

Returns:

Type:: void

Example

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