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

// Render the component
switch.render();

Extends

Members

active :boolean

Sets the active status of the switch component.

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

// Render the component
switch.render();

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

// Render the component
switch.render();

// Example 1: Using a string as the handler:
switch.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
switch.onChange = () => { console.log('state changed', switch.text); };
// Example 3: Using a common function as the handler:
switch.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 switch = new TComponents.Switch(document.body, {
  position: 'absolute',
  zIndex: 1000
});

// Render the component
switch.render();

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

Methods

(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

(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;
 }`
);