TComponents. DigitalLed

new DigitalLed(parent, propsopt)

Digital LED component that displays a digital signal and triggers callbacks when the signal changes or the component is clicked. This class focuses on the specific propertiesof the DigitalLed component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeAttributesDefaultDescription
parentHTMLElement

The parent HTML element of the component.

propsTComponents.SignalIndicatorProps<optional>
{}

The properties of the Digital LED component.

Properties
NameTypeDescription
_propsTComponents.SignalIndicatorProps

The properties object of the Digital LED component.

Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

Extends

Members

(protected) active :boolean

Sets the active state of the Digital LED component.

Type:
  • boolean
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the active state
digitalLed.active = true;

(protected) activeX :boolean

Sets the active state of the Digital LED component. This method updates the active value internally without triggering change events or user-originated side effects.

Type:
  • boolean
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the active state
digitalLed.activeX = true;

inputVar :object

Sets inputVar property. This property is used to set the inputVar configuration. If the configuration is invalid or doesn't meet the expected conditions, an exception will be triggered in the input component. Note: Invalid inputVar configurations may cause the input component to throw an error.

Type:
  • object
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the inputVar configuration
digitalLed.inputVar = {
  type: TComponents.Component_A.INPUTVAR_TYPE.BOOL,
  func: TComponents.Component_A.INPUTVAR_FUNC.CUSTOM,
  value: true
};

onChange :function

Sets the onChange event handler for the Digital LED component. The handler can either be a string representing a function to be executed or a function itself.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the digital led object.
  2. If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.
  • Correct (Statements Only): xx.onChange = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Examples
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Example 1: Using a string as the handler:
digitalLed.onChange = "console.log('hello');"
// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the digitalLed object
digitalLed.onChange = () => { console.log(digitalLed.text); }
// Example 3: Using function with async operation:
digitalLed.onChange = async function () {
 console.log('hello', this.text);
}

onClick :function

Sets the click event handler. The handler can either be a string representing a function to be executed or a function itself.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the digitalLed object.
  2. If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.
  • Correct (Statements Only): xx.onClick = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onClick = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Example 1: Using a string as the handler:
digitalLed.onClick = "console.log('hello');"

// Example 2: Using a arrow function as the handler:
digitalLed.onClick = () => { console.log(digitalLed.text); }

// Example 3: Using function with async operation:
digitalLed.onClick = async function () {
 console.log('hello');
};

readOnly :boolean

Sets the read-only state of the Digital LED component

Type:
  • boolean
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the readOnly state
digitalLed.readOnly = true;

text :string

Sets the text value of the Digital LED component and updates the active state accordingly.

Type:
  • string
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the text value
digitalLed.text = '0';

textX :string

Sets the text value of the Digital LED component and updates the active state accordingly. The update is performed silently without triggering change events or user-originated side effects.

Type:
  • string
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: '1',
});

// Render the component
digitalLed.render();

// Update the text value
digitalLed.textX = '0';

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

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

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

Overrides
Source
Returns:

The default properties of the Digital LED component.

Type: 
TComponents.SignalIndicatorProps

markup() → {string}

Returns the HTML markup for the component.

Overrides
Source
Returns:

The HTML markup for the component.

Type: 
string

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

Initializes the component and sets up click event handling.

Overrides
Source
Returns:
Type: 
Promise.<void>

onRender() → {void}

Renders the component on the screen and applies the necessary styles and event listeners.

Overrides
Source
Throws:

Throws an error if rendering fails.

Type
Error
Returns:
Type: 
void

setText(text)

This attribute is used to set the text of the Digital LED component. When using this method to set the text, the change will be synchronized with the controller, But it will not trigger the onchange callback function or any user-originated side effects.

Parameters:
NameTypeDescription
textstring
Source
Example
const digitalLed = new TComponents.DigitalLed(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 1
});

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

digitalLed.setText(0);

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Returns:
Type: 
void
Example
TComponents.DigitalLed.loadCssClassFromString(`
  .tc-digital-container {
   height: 100%;
   min-width: 0px;
  }
`);