new Menu_A(parent, propsopt)
A menu component for displaying a list of views. Abstract class used by TComponents.Hamburger and TComponents.Tab
| Name | Type | Attributes | Description |
|---|---|---|---|
parent | HTMLElement | HTML element that is going to be the parent of the component | |
props | TComponents. | <optional> | Properties accepted by the Menu_A component. |
- Source
const menu = new TComponents.Menu_A(document.body, {
title: 'My Menu',
views: [
{ name: 'View 1', content: 'id-1' },
{ name: 'View 2', content: 'id-2' },
],
});
menu.render();Extends
Members
title :string
The title property of menu-type component.
- string
- Deprecated
- The 'title' interface is no longer supported by 'TComponent.Menu_A'. Components that inherit from it will need to override the 'title' interface themselves.
- Source
const menu = new TComponents.Menu_A(document.body, { title: 'My Menu' });
// Update the title dynamically
menu.title = 'Updated Menu Title';useTitle :boolean
Set the useTitle property.
- boolean
- Deprecated
- The 'useTitle' interface is no longer supported by 'TComponent.Menu_A'. Components that inherit from it will need to override the 'useTitle' interface themselves.
- Source
const menu = new TComponents.Menu_A(document.body, { useTitle: true });
// Update the property dynamically
menu.useTitle = false;views :Array.<any>
The views array of view-type components. This interface is about to be deprecated; please review TComponents.Menu_A#_initViews before using it.
- Array.<any>
- Deprecated
- This getter will be removed in future versions. Use the instance field `this.views` directly instead. Review TComponents.Menu_A#_initViews for more details.
- Source
Methods
(protected) _getDom(content, id, name) → {HTMLElement}
Get the DOM element for the given content.
| Name | Type | Description |
|---|---|---|
content | TComponents. | The content of the view. |
id | string | The identifier of the view. |
name | string | The name of the view. |
- Source
The DOM element.
- Type:
- HTMLElement
(protected) _initViews() → {void}
Build internal view models and child component instances from props.views. This method processes each view's content, ensuring it is a valid HTMLElement or TComponents.Component_A instance. It also initializes the view's ID and name properties. If the content is a string, it attempts to find the corresponding DOM element by ID. If the content is not a valid type, it throws an error. Due to issues with the view's getter constructor, it is recommended that inherited components use this method to initialize views.
- Source
- Type:
- void
// Example usage in a derived class
class MyMenu extends Menu_A {
constructor(parent, props) {
super(parent, props);
this._views = [];
}
// Override the view getter and setter.
get views() {
return this._views;
}
onInit(){
this._initViews();
...
}
}(protected) _processContent(viewId, viewContent) → {HTMLElement}
Process the content of the view.
| Name | Type | Description |
|---|---|---|
viewId | string | | The id of the view. |
viewContent | string | | The content of the view. |
- Source
The content of the view, which is of the type HTMLElement.
- Type:
- HTMLElement
addView(newView) → {void}
Add a new view to the menu.
| Name | Type | Description |
|---|---|---|
newView | TComponents. | View object. |
- Source
- To Do
- This is an experimental method and may be replaced at any time, its use is not recommended.
- Type:
- void
appendChild(index, instance, name) → {void}
Appends a child component to a specific view by its index. The child component will be appended to the content of the view at the specified index. If a child with the same name already exists, it will be removed first.
| Name | Type | Description |
|---|---|---|
index | number | The index of the view to append the child to. |
instance | object | The child component to append. |
name | string | The name of the child component. |
- Source
- Throws an error if the index is out of range or invalid.
- Type
- Error
- Type:
- void
const menu = new TComponents.Menu_A(document.body, {views:[{name: 'view-1', content: 'id-xxx'}]});
const childComponent = new TComponents.Button_A(null, {});
// Append to the first view
menu.appendChild(0, childComponent, 'childName');checkActiveViewIndex(t) → {null|number}
Determines the type of menu component currently set to active. Checks if the provided view index is valid and sets it as active if it is.
| Name | Type | Description |
|---|---|---|
t | number | The new active view index. |
- Source
Returns null if the provided index is the same as the current active index or invalid, otherwise returns the new active view index.
- Type:
- null |
number
const menu = new TComponents.Menu_A(document.body,{});
const newIndex = menu.checkActiveViewIndex(1);(protected) defaultProps() → {TComponents.MenuProps}
Returns the default values of class properties (excluding parent properties).
- Overrides
- Source
- Type:
- TComponents.
MenuProps
mapComponents() → {object}
Maps components to their identifiers.
- Source
- Type:
- object
markup() → {string}
Generate the markup for the component.
- Overrides
- Source
HTML markup
- Type:
- string
onInit() → {void}
Initializes the component.
- Overrides
- Source
- If an error occurs during initialization.
- Type
- ErrorCode
- Type:
- void
onRender() → {void}
Render the component.
- Overrides
- Source
- If an error occurs during rendering.
- Type
- Error
- Type:
- void
removeChild(index, t) → {void}
Removes a child component from a specific view by its index. The child component is identified by the provided name or component ID.
| Name | Type | Description |
|---|---|---|
index | number | The index of the view from where the child the removed. |
t | string | | The name or component instance of the child to be removed. |
- Source
- Throws an error if the index is out of range or invalid.
- Type
- Error
- Type:
- void
const menu = new TComponents.Menu_A(document.body, {});
// Remove a child component from the first view by name
menu.removeChild(0, 'childName');