TComponents. Toggle_A

new Toggle_A(parent, props)

Toggle_A element. This class focuses on the specific properties of the Toggle_A 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.ToggleProps
Source
Example
const toggle = new TComponents.Toggle_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await toggle.render();

Extends

Members

multi :boolean

Set if the toggle button allows multi toggled button.

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

// Render the component.
await toggle.render();

toggle.multi = true;

onChange :function

Sets the onChange event handler for the toggle 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 toggle 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 toggle = new TComponents.Toggle_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await toggle.render();
// Example 1: Using a string as the handler:
toggle.onChange = "console.log(this.multi);"
// Example 2: Using a function as the handler:
toggle.onChange = function () {
  console.log(this.multi);
};
// Example 3: Using an arrow function as the handler:
// Note that the `this` context will not refer to the toggle object
toggle.onChange = () => {
  console.log(toggle.multi);
};

optionItems :string

Sets the option items from a formatted string.

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

// Render the component.
await toggle.render();

toggle.optionItems = `text4|value4;text5|value5;text6|value6`;

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

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

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

Overrides
Source
Returns:
Type: 
TComponents.ToggleProps

generateModel() → {Array.<any>}

Generate toggle button model with value parameter

Source
Returns:

The generated model array.

Type: 
Array.<any>

markup() → {string}

Returns the markup for the toggle component.

Overrides
Source
Returns:

HTML markup string.

Type: 
string

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

Initializes the toggle component.

Overrides
Source
Returns:
Type: 
Promise.<void>

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

Renders the toggle component.

Overrides
Source
Throws:

If an error occurs during rendering.

Type
Error
Returns:
Type: 
Promise.<void>

setToggled(index, toggled, fireCallback) → {void}

Set the toggle status of the specifc index button.

Parameters:
NameTypeDescription
indexnumber

the index of target button

toggledboolean

null: invert the status of target button; true/false: set target button to true/false

fireCallbackboolean

True if expecting to trigger onClick event

Source
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.Toggle_A.loadCssClassFromString(`
  .tc-toggle {
    height: inherit;
   }`
);