Skip to main content

Button class

📖 Description​

The Button class defines a button control for the Tripetto builder. It is derived from the Control class.

📺 Preview​

🆕 constructor​

Creates a new Button instance.

Signature​

constructor(
  label: string,
  type?: "normal" | "accept" | "warning" | "cancel",
  style?: IButtonStyle
): Button

Parameters​

NameTypeOptionalDescription
labelstringNoSpecifies the label for the button.
type"normal" | "accept" | "warning" | "cancel"YesSpecifies the button type.
styleIButtonStyleYesSpecifies the button style (when omitted the default global style will be used).

Return value​

Returns a reference to the new Button instance.

📌 Statics​

🏷️ style​

Contains the global default style for the button control.

Type​

IButtonStyle

🗃️ Fields​

🏷️ buttonType​

Sets or retrieves the button type.

Type​

"normal" | "accept" | "warning" | "cancel"

🏷️ hasFocus​

Retrieves if the control has input focus.

Type​

boolean

🏷️ isDisabled​

Sets or retrieves if the control is disabled.

Type​

boolean

🏷️ isObservable​

Retrieves if the control is observable.

Type​

boolean

🏷️ isVisible​

Sets or retrieves the visibility of the control.

Type​

boolean

🏷️ style​

Contains the style for the button control.

Type​

IButtonStyle

▶️ Methods​

🔧 blur​

Blurs the focus of the control.

Signature​

blur(): void

🔧 disable​

Disables the control.

Signature​

disable(): this

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 disabled​

Specifies the state of the control.

Signature​

disabled(disabled?: boolean): this

Parameters​

NameTypeOptionalDescription
disabledbooleanYesSpecifies if the control is disabled (default is true).

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 enable​

Enables the control.

Signature​

enable(): this

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 focus​

Sets the focus to the control.

Signature​

focus(): boolean

Return value​

Returns true if the focus is set.

🔧 hide​

Hides the control.

Signature​

hide(): this

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 indent​

Enables control indentation. This can only be set during construction.

Signature​

indent(size: number): this

Parameters​

NameTypeOptionalDescription
sizenumberNoSpecifies the indent size in pixels.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 label​

Sets the label for the control.

tip

If you want to use markdown in the label, activate it first using the markdown method.

Signature​

label(label: string): this

Parameters​

NameTypeOptionalDescription
labelstringNoSpecifies the control label.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 markdown​

Specifies if the label should support markdown formatting.

Signature​

markdown(options?: IMarkdownOptions): this

Parameters​

NameTypeOptionalDescription
optionsIMarkdownOptionsYesSpecifies the markdown options.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 on​

Specifies the tap function.

Signature​

on(fn: (button: Button) => void): this

Parameters​

NameTypeOptionalDescription
fn(button: Button) => voidNoSpecifies the tap function.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 show​

Shows the control.

Signature​

show(): this

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 type​

Sets the button type.

Signature​

type(type: "normal" | "accept" | "warning" | "cancel"): this

Parameters​

NameTypeOptionalDescription
type"normal" | "accept" | "warning" | "cancel"NoSpecifies the button type.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 url​

Specifies an URL for the button.

Signature​

url(link?: string, target?: "blank" | "self"): this

Parameters​

NameTypeOptionalDescription
linkstringYesSpecifies the URL.
target"blank" | "self"YesSpecifies the target for the URL.

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 visible​

Specifies the visibility of the control.

Signature​

visible(visible?: boolean): this

Parameters​

NameTypeOptionalDescription
visiblebooleanYesSpecifies if the control is visible (default is true).

Return value​

Returns a reference to the Button instance to allow chaining.

🔧 width​

Sets the width of the control.

Signature​

width(width: number | "auto" | "full"): this

Parameters​

NameTypeOptionalDescription
widthnumber | "auto" | "full"NoSpecifies the control width in pixels or sets the width to auto or full.

Return value​

Returns a reference to the Button instance to allow chaining.

⛓️ Interfaces​

🔗 IButtonStyle​

Describes the interface for the button styles.

Type declaration​

interface IButtonStyle {
  /* Button appearance. */
  appearance?: IStyles;

  /* Button fused with form. */
  fused?: IStyles;

  /* Button disabled. */
  disabled?: IStyles;

  /* Button focus. */
  focus?: IStyles;

  /* Button hover. */
  hover?: IStyles;

  /* Button tapped. */
  tap?: IStyles;

  /* Normal button. */
  normal?: {
    /* Button appearance. */
    appearance?: IStyles;

    /* Button focus. */
    focus?: IStyles;

    /* Button hover. */
    hover?: IStyles;

    /* Button tapped. */
    tap?: IStyles;
  };

  /* Accept button. */
  accept?: {
    /* Button appearance. */
    appearance?: IStyles;

    /* Button focus. */
    focus?: IStyles;

    /* Button hover. */
    hover?: IStyles;

    /* Button tapped. */
    tap?: IStyles;
  };

  /* Warning button. */
  warning?: {
    /* Button appearance. */
    appearance?: IStyles;

    /* Button focus. */
    focus?: IStyles;

    /* Button hover. */
    hover?: IStyles;

    /* Button tapped. */
    tap?: IStyles;
  };

  /* Cancel button. */
  cancel?: {
    /* Button appearance. */
    appearance?: IStyles;

    /* Button focus. */
    focus?: IStyles;

    /* Button hover. */
    hover?: IStyles;

    /* Button tapped. */
    tap?: IStyles;
  };
}