TComponents. LayoutInfobox

new LayoutInfobox(parent, propsopt)

LayoutInfobox is a component that displays a title and content in a box This class focuses on the specific properties of the LayoutInfobox component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeAttributesDescription
parentHTMLElement

HTMLE element that is going to be the parent of the component

propsTComponents.LayoutInfoboxProps<optional>

Props for the layout infobox component

Source
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

Extends

Members

contentRoot :HTMLElement

Gets the content container instance. The obtained value should be treated as a read-only property and should not be used for manipulation.

Type:
  • HTMLElement
Source
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const contentContainer = layoutInfoboxInstance.contentRoot;
console.log(contentContainer);

title :string

Sets the title of the infobox.

Type:
  • string
Source
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

layoutInfoboxInstance.title = 'New Infobox Title';

useBorder :boolean

Sets the border usage state.

Type:
  • boolean
Source
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

layoutInfoboxInstance.useBorder = false;

useTitle :boolean

Sets the title usage state.

Type:
  • boolean
Source
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

layoutInfoboxInstance.useTitle = false;

Methods

appendChild(t, name) → {void}

Appends a child component to the current component. If the child is a TComponent, it will be rendered and attached to the content root.

Parameters:
NameTypeDescription
tTComponents.Container_A | HTMLElement

The child component instance to be added.

namestring

The name of the child component to be appended.

Source
Throws:

If the t parameter is not a valid object.

Type
Error
Returns:
Type: 
void
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

// Create a button component.
const childComponent = new TComponents.Button(null, {});

layoutInfoboxInstance.appendChild(childComponent, 'childComponentName');

createEmptyContainer(props) → {TComponents.Container_A}

Creates an empty container.

Parameters:
NameTypeDescription
propsany

Properties for the container.

Deprecated
  • This API is going to be deprecated and is not recommended for future use.
Source
Returns:

The created container.

Type: 
TComponents.Container_A
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const emptyContainer = layoutInfoboxInstance.createEmptyContainer({
  children: ['child1-uuid-xxxxx']
});

console.log(emptyContainer);

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

Returns the default values of class properties (excluding parent properties).

Overrides
Source
Returns:
Type: 
TComponents.LayoutInfoboxProps

getContentStyle() → {string}

Gets the CSS text for the content style.

Source
Returns:

The CSS text for the content style.

Type: 
string
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const contentStyle = layoutInfoboxInstance.getContentStyle();

getTitleLayoutStyle() → {string}

Gets the CSS text for the title layout style.

Source
Returns:

The CSS text for the title layout style.

Type: 
string
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const titleLayoutStyle = layoutInfoboxInstance.getTitleLayoutStyle();

getTitleStyle() → {string}

Gets the CSS text for the title style.

Source
Returns:

The CSS text for the title style.

Type: 
string
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const titleStyle = layoutInfoboxInstance.getTitleStyle();

getWrapperStyle() → {string}

Gets the CSS text for the wrapper style.

Source
Returns:

The CSS text for the wrapper style.

Type: 
string
Example
const layoutInfoboxInstance = new TComponents.LayoutInfobox(document.body, {
  position: 'absolute',
  zIndex: 1000,
  title: 'Infobox Title'
});

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

const wrapperStyle = layoutInfoboxInstance.getWrapperStyle();

console.log(wrapperStyle);

mapComponents() → {object}

Maps the components.

Overrides
Source
Returns:

The mapped components.

Type: 
object

markup() → {string}

Generates the markup for the component.

Overrides
Source
Returns:

The HTML markup for the component.

Type: 
string

onInit() → {void}

Initializes the layoutInfobox

Overrides
Source
Returns:
Type: 
void

onRender() → {void}

Handles rendering of the component.

Overrides
Source
Throws:

Throws an error if rendering fails.

Type
Error
Returns:
Type: 
void

(protected) processContent(props) → {TComponents.Container_A}

Build and return a TComponent.Container_A mounted under the infobox content area.

Parameters:
NameTypeDescription
propsTComponents.ContainerProps

Properties for the container.

Source
Returns:

The created container.

Type: 
TComponents.Container_A

removeChild(t) → {void}

Removes a child component from the current component. It can remove the child either by name (if t is a string) or by component instance (if t is an object with a compId). After removing the child, the method updates the child property by calling mapComponents() and triggers a re-render of the component.

Parameters:
NameTypeDescription
tstring | object

The child component to remove. It can be either:

  • A string representing the child component's name (if the child is in _newChild).
  • An object with a compId property, representing the child component to be removed.
Source
Throws:

If the t parameter is neither a string nor an object with a compId.

Type
Error
Returns:
Type: 
void
Example
layoutInfoboxInstance.removeChild('childComponent'); // Removes by name
layoutInfoboxInstance.removeChild(someChildInstance); // Removes by component instance

(static) loadCssClassFromString(css)

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Example
TComponents.LayoutInfobox.loadCssClassFromString(`
  .tc-layout-infobox {
    height: 100%;
    width: 100%;
  }`
);