TComponents. Hamburger

new Hamburger(parent, props)

Represents a Hamburger menu component.

Parameters:
NameTypeDescription
parentHTMLElement

The parent element to which the hamburger menu is attached..

propsTComponents.HamburgerProps

The properties of the hamburger menu.

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

// Render the hamburger menu
hamburgerInstance.render();

Extends

Members

activeView :string

Gets the currently active view.

Type:
  • string
Deprecated
Source
Example
const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
hamburgerInstance.render();

// Get the current active view
const currentActiveView = hamburgerInstance.activeView;
console.log(currentActiveView); // 'View 1'

activeViewIndex :number

Sets the active view index and updates the active view in the Hamburger component.

Type:
  • number
Source
Example
const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
hamburgerInstance.render();

// Get the current active view index
const currentActiveViewIndex = hamburgerInstance.activeViewIndex;
console.log(currentActiveViewIndex); // 0

activeViewName :string

Sets the active view by its display name. The comparison is performed against the resolved text from Component_A.dynamicText.

Type:
  • string
Source
Example
const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
hamburgerInstance.render();

// Get the current active view name
const currentActiveView = hamburgerInstance.activeViewName;
console.log(currentActiveView); // 'View 1'

alwaysVisible :boolean

The visibility state of the hamburger menu.

Type:
  • boolean
Source
Example
const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
hamburgerInstance.render();

// Get the current visibility state
const isAlwaysVisible = hamburgerInstance.alwaysVisible;
console.log(isAlwaysVisible); // true

// Set the visibility state to false
hamburgerInstance.alwaysVisible = false;

views :Array.<any>

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

Type:
  • Array.<any>
Overrides
Source
Example
const hamburgerInstance = new TComponents.Hamburger(document.body, {
  position: 'absolute',
  width: 200,
  height: 200,
  zIndex: 1000,
  views: [
    {
      name: 'View 1',
      icon: 'abb-icon abb-icon-home-house_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
    {
      name: 'View 2',
      icon: 'abb-icon abb-icon-folder-open_32',
      content: `view_${API.generateUUID()}`,
      children: [],
    },
  ],
  activeViewIndex: 0,
});

// Render the hamburger menu
hamburgerInstance.render();

// Get the views
const views = hamburgerInstance.views;
console.log(views);

Methods

(protected) _setActiveView() → {void}

Removes the “active” style from all hamburger menu buttons, then activates the view at the specified index.

Source
Throws:

If the hamburger menu is not initialized or the target view cannot be found.

Type
Error
Returns:
Type: 
void

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

Returns default properties for the hamburger menu.

Overrides
Source
Returns:

The default properties.

Type: 
TComponents.HamburgerProps

mapComponents() → {object}

Maps components to their identifiers.

Overrides
Source
Returns:
Type: 
object

markup() → {string}

Generates the HTML markup for the hamburger menu.

Overrides
Source
Returns:

The HTML markup.

Type: 
string

onInit() → {void}

Initializes the hamburger menu.

Overrides
Source
Returns:
Type: 
void

onRender() → {void}

Renders the hamburger menu.

Overrides
Source
Returns:
Type: 
void

(static) loadCssClassFromString(css)

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Example
TComponents.Hamburger.loadCssClassFromString(/*css* / `
  .tc-hamburger {
    height: 100%;
    width: 100%;
  }`
);