Class: Container

new Container_A(parent, propsopt)

Container that can hold other components or HTML elements. It can be used to create row or column containers.

Parameters:

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

Source: basic/as-container.js, line 24

Example

const container = new TComponents.Container_A(document.body, {
  children: [new TComponents.Button(null, {})],
  box: true,
  width: '100%',
  height: '100%',
  classNames: ['flex-row', 'items-start', 'justify-start'],
  id: 'my-container'
});

Extends

TComponents.Component_A

Members

enabled :boolean

Updates the enabled state of the container component.

Type:

boolean

Overrides: TComponents.Component_A#enabled
Source: basic/as-container.js, line 56

Example

const container = new TComponents.Container_A(document.body, {});
container.enabled = true;

Methods

cssItem(index, className, remove) → {void}

Add/remove a class to a specific child element. The index of the child element is the same as the index of the child element in the children array.

Parameters:

Name	Type	Description
`index`	number	Index of the child element to be styled.
`className`	string	Name of the class to be added (removed).
`remove`	boolean	If true, the class will be removed.

Source: basic/as-container.js, line 220

Returns:

Type:: void

cssItems(className, remove) → {void}

Add/remove a class to all child elements.

Parameters:

Name	Type	Description
`className`	string	Name of the class to be added (removed).
`remove`	boolean	If true, the class will be removed.

Source: basic/as-container.js, line 234

Returns:

Type:: void

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

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

Overrides: TComponents.Component_A#defaultProps
Source: basic/as-container.js, line 70

Returns:

Type:: TComponents.ContainerProps

mapComponents() → {object}

Maps the components in the container.

Overrides: TComponents.Component_A#mapComponents
Source: basic/as-container.js, line 150

Returns:

An object containing the mapped components.

Type:: object

(async) onInit() → {Promise.<void>}

Initializes the component. This method is called after the component is created and added to the DOM.

Overrides: TComponents.Component_A#onInit
Source: basic/as-container.js, line 89

Throws:

Throws an error if a child element cannot be found in the DOM.
Type Error

Returns:

Type:: Promise.<void>

onRender() → {void}

Renders the container and its children.

Overrides: TComponents.Component_A#onRender
Source: basic/as-container.js, line 160

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: basic/as-container.js, line 248

Returns:

Type:: void

Example

Container_A.loadCssClassFromString(`
.t-component__container {
  max-width: inherit;
  max-height: inherit;
  width: 100% !important;
  height: 100% !important;
}

.t-component__container-disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.t-component__container-disabled > * {
  pointer-events: none;
}
`);