Class: Button

new Button(parent, props)

Rounded button that triggers a callback when pressed. Additional callbacks can be added with the onClick method. This class focuses on the specific properties of the Button 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.ButtonProps	Button properties

Source: as-button.js, line 51

Example

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

Extends

TComponents.Component_A

Members

color :string

Sets the text color of the button

Type:

string

Source: as-button.js, line 374

Example

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

button.color = '#ffffff';

icon :string|null

Sets the icon path.

Type:

string | null

Source: as-button.js, line 346

Example

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

button.icon = 'abb-icon abb-icon-abb_robot-tool_32';

onClick :function

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

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the button object.
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: as-button.js, line 433

Examples

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

// Example 1.
button.onClick = async function() {
  console.log('Button clicked!', this.text);
};

// Example 2.
button.onClick = "console.log('Button clicked!', this.text);";

// Example 3.
// Note that the `this` context will not refer to the button object
button.onClick = () => {
  console.log('Button clicked! ', button.text);
};

onPointerDown :function

Sets the pointer down event handler for the button. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the button object.
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.onPointerDown = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onPointerDown = "function() { console.log('Action done.'); }"

Type:

function

Source: as-button.js, line 533

Examples

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

// Example 1.
button.onPointerDown = async function() {
 console.log('Pointer down on button!', this.text);
};

// Example 2.
button.onPointerDown = "console.log('Pointer down on button!', this.text);";

// Example 3.
// Note that the `this` context will not refer to the button object
button.onPointerDown = () => {
 console.log('Pointer down on button! ', button.text);
};

onPointerRelease :function

Sets the pointer release event handler for the button. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the button object.
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.onPointerRelease = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onPointerRelease = "function() { console.log('Action done.'); }"

Type:

function

Source: as-button.js, line 483

Examples

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

// Example 1.
button.onPointerRelease = async function() {
 console.log('Pointer released on button!', this.text);
}

// Example 2.
button.onPointerRelease = "console.log('Pointer released on button!', this.text);";

// Example 3.
// Note that the `this` context will not refer to the button object
button.onPointerRelease = () => {
 console.log('Pointer released on button! ', button.text);
};

text :string

Sets the button text.

Type:

string

Source: as-button.js, line 402

Example

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

button.text = 'Click Me';

tips :string

Set the button disabled state and review the tips.

Type:

string

Overrides: TComponents.Component_A#tips
Source: as-button.js, line 161

Example

const button = new TComponents.Button(document.body, {
  position: 'absolute',
  left: 100,
  top: 100,
  zIndex: 1000,
  text: 'Click me'
});

// Render the button
button.render();

button.tips = 'New tips for the button';

// Disable button to display tips
button.enabled = false;

Methods

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

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

Overrides: TComponents.Component_A#defaultProps
Source: as-button.js, line 86

Returns:

Type:: TComponents.ButtonProps

markup() → {string}

Returns the markup for the button component.

Overrides: TComponents.Component_A#markup
Source: as-button.js, line 311

Returns:

HTML markup string.

Type:: string

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

Initialization function for the button component.

Overrides: TComponents.Component_A#onInit
Source: as-button.js, line 145

Returns:

Type:: Promise.<void>

onRender() → {void}

Renders the button component.

Overrides: TComponents.Component_A#onRender
Source: as-button.js, line 266

Throws:

If an error occurs during rendering.
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-button.js, line 575

Returns:

Type:: void

Example

TComponents.Button.loadCssClassFromString(`
.tc-button {
  height: inherit;
 }`
);