TComponents. Switch

new Switch(parent, props)

Switch element. Additional callbacks can be added with the onChange method. This class focuses on the specific properties of the Switch component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeDescription
parentHTMLElement

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

propsTComponents.SwitchProps
Source
Example
const switchInstance = new TComponents.Switch(document.body, {
  position: 'absolute',
  zIndex: 1000
});

// Render the component
switchInstance.render();

Extends

Members

active :boolean

Sets the active status of the switch component.

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

// Render the component
switchInstance.render();

// Set the text.
switchInstance.active = false;

onChange :function

Sets the onChange 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 switch 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 switchInstance = new TComponents.Switch(document.body, {
  position: 'absolute',
  zIndex: 1000
});

// Render the component
switchInstance.render();

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

text :string

Sets the text value of the switch component. If the text is '1' or 'true', the switch will be active; otherwise, it will be inactive.

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

// Render the component
switchInstance.render();

// Set the text.
switchInstance.text = 0;

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

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

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

Overrides
Source
Returns:
Type: 
TComponents.SwitchProps

markup() → {string}

Generates the markup for the switch component.

Overrides
Source
Returns:

HTML markup string

Type: 
string

onInit() → {void}

Initializes the switch component.

Overrides
Source
Returns:
Type: 
void

onRender() → {void}

Renders the switch component.

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 Switch component. When you set this attribute, the component will attempt to synchronize the new text value with any bound variables or data sources.

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

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

switchInstance.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.Switch.loadCssClassFromString(`
.tc-switch {
  height: inherit;
 }`
);