Class: Text

new Text(parent, props)

Text component that displays various types of text (e.g., headers, body, description) with customizable styles. This class focuses on the specific properties of the Text component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Description
`parent`	HTMLElement	HTML element that is going to be the parent of the component
`props`	TComponents.TextProps

Source: as-text.js, line 41

Example

const text = new TComponents.Text(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Hello',
  color: '#000',
});

// Render the component.
text.render();

Extends

TComponents.Component_A

Members

text :string

Sets the text content.

Type:

string

Source: as-text.js, line 188

Example

const text = new TComponents.Text(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Hello',
  color: '#000',
});

text.render();

// Set text value.
text.text = 'new Text';

textType :string

Sets the text type and adjusts corresponding styles. The supported text types are:

Header1
Header2
Header3
Body
Description
Error
Warning
Success
Information

Type:

string

Source: as-text.js, line 218

Example

const text = new TComponents.Text(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Hello',
  color: '#000',
});

text.render();

// Set text tyoe.
text.textType = 'Header1';

Methods

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

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

Overrides: TComponents.Component_A#defaultProps
Source: as-text.js, line 75

Returns:

Type:: TComponents.TextProps

markup() → {string}

Returns the markup for the text component.

Overrides: TComponents.Component_A#markup
Source: as-text.js, line 171

Returns:

HTML markup for the text component.

Type:: string

onRender() → {void}

Renders the text component and applies the styles and properties.

Overrides: TComponents.Component_A#onRender
Source: as-text.js, line 133

Throws:

Throws error code ErrorCode.FailedToRunOnRender when runtime error happens.
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-text.js, line 295

Returns:

Type:: void

Example

TComponents.Text.loadCssClassFromString(`
  .tc-text {
    height: inherit;
   }`
);