TComponents. VarIncrDecr

new VarIncrDecr(parent, propsopt)

Component connected to a variable together with increment and decrement buttons. This class focuses on the specific properties of the VarIncrDecr component'. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeAttributesDescription
parentHTMLElement

DOM element in which this component is to be inserted

propsTComponents.VarIncrDecrProps<optional>

Properties of the component

Properties
NameTypeDescription
_propsTComponents.VarIncrDecrProps

Properties of the component

_bindDataObject | null

Data binding information

Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

Extends

Members

keyboardHelperDesc :string

Sets the keyboard helper description.

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

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

varIncrDecr.keyboardHelperDesc = 'Press + or - to increment or decrement the value'; // Sets the keyboard helper description

max :number

Sets the maximum value in the number range.

Type:
  • number
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

varIncrDecr.max = 100; // Sets the maximum value to 100

maxValue :number

Sets the maximum value in the number range.

Type:
  • number
Deprecated
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

varIncrDecr.maxValue = 100; // Sets the maximum value to 100

min :number

Sets the minimum value in the number range.

Type:
  • number
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

varIncrDecr.min = 0; // Sets the minimum value to 0

min :number

Sets the minimum value in the number range.

Type:
  • number
Deprecated
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

varIncrDecr.minValue = 0; // Sets the minimum value to 0

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

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

// Example 1: Using a string as the handler:
varIncrDecr.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 varIncrDecr object
varIncrDecr.onChange = () => { console.log('state changed', varIncrDecr.text); };
// Example 3: Using a common function as the handler:
varIncrDecr.onChange = async function() {
  console.log('state changed', this.text);
};

step :number

Sets the step value.

Type:
  • number
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

// Sets the step to 5
varIncrDecr.step = 5;

text :string

Sets the text property. (recommended to use value instead)

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

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

// Sets the text to '100'
varIncrDecr.text = '100';

useBorder :boolean

Sets the useBorder property.

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

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

varIncrDecr.useBorder = true; // Sets the useBorder to true

value :number

Sets the value property. (TBD)

Type:
  • number
Source
Example
const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

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

// Sets the value to 100
varIncrDecr.value = 100;

Methods

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

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

Overrides
Source
Returns:
Type: 
TComponents.VarIncrDecrProps

mapComponents() → {object}

Maps the internal components.

Overrides
Source
Returns:

The mapped components

Type: 
object

markup() → {string}

Returns the HTML markup for the component.

Overrides
Source
Returns:

The HTML markup

Type: 
string

(async) onInit() → {void}

Initialize the component.

Overrides
Source
Returns:
Type: 
void

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

Renders the component.

Overrides
Source
Throws:
Error
Returns:

A promise that resolves when the component is rendered.

Type: 
Promise.<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.VarIncrDecr.loadCssClassFromString(`
  .tc-varincrdecr {
    height: inherit;
  }`
);