Skip to content
Snippets Groups Projects
HTML.mdx 3.94 KiB
Newer Older
---
title: Form HTML class - Blocks
sidebar_label: HTML
description: The HTML class defines a HTML instance for the Tripetto builder.
---

import Preview from '@site/src/components/preview.js';

# HTML class

## 📖 Description {#description}
The `HTML` class defines a HTML instance for the Tripetto builder. It is derived from the [`Control`](Control.mdx) class.

## 📺 Preview {#preview}
<Preview src="forms-html.png" />

---
## 🆕 `constructor` {#constructor}
Creates a new `HTML` instance.
#### Signature
```ts
constructor(htmlCode: string, interactive?: boolean, style?: IHTMLStyle): HTML
```
#### Parameters
| Name          | Type                        | Optional | Description                                                                                                                                   |
|:--------------|:----------------------------|:---------|:----------------------------------------------------------------------------------------------------------------------------------------------|
| `htmlCode`    | string                      | No       | Specifies the HTML code for the control.                                                                                                      |
| `interactive` | boolean                     | Yes      | Specifies if the HTML code is interactive. Tripetto's touch controller is disabled in that case so events can propagate to the HTML elements. |
| `style`       | [`IHTMLStyle`](#IHTMLStyle) | Yes      | Specifies the HTML style (when omitted the default global style will be used).                                                                |
#### Return value
Returns a reference to the new `HTML` instance.

## 📌 Statics {#statics}

---
### 🏷️ `style` {#statics-style}
Contains the global default style for the HTML control.
#### Type
[`IHTMLStyle`](#IHTMLStyle)

## 🗃️ Fields {#fields}

---
### 🏷️ `HTML` {#HTML}
Sets or retrieves the HTML code.
#### Type
string

---
### 🏷️ `isVisible` {#isVisible}
Sets or retrieves the visibility of the control.
#### Type
boolean

---
### 🏷️ `style` {#style}
Contains the style for the HTML control.
#### Type
[`IHTMLStyle`](#IHTMLStyle)

## ▶️ Methods {#methods}

---
### 🔧 `hide` {#hide}
Hides the control.
#### Signature
```ts
hide(): this
```
#### Return value
Returns a reference to the `HTML` instance to allow chaining.

---
### 🔧 `indent` {#indent}
Enables control indentation. This can only be set during construction.
#### Signature
```ts
indent(size: number): this
```
#### Parameters
| Name   | Type   | Optional | Description                          |
|:-------|:-------|:---------|:-------------------------------------|
| `size` | number | No       | Specifies the indent size in pixels. |
#### Return value
Returns a reference to the `HTML` instance to allow chaining.

---
### 🔧 `show` {#show}
Shows the control.
#### Signature
```ts
show(): this
```
#### Return value
Returns a reference to the `HTML` instance to allow chaining.

---
### 🔧 `update` {#update}
Indicates to the control something has changed in the HTML hosted by the control and the control needs to update its dimensions.
#### Signature
```ts
update(): void
```

---
### 🔧 `visible` {#visible}
Specifies the visibility of the control.
#### Signature
```ts
visible(visible?: boolean): this
```
#### Parameters
| Name      | Type    | Optional | Description                                              |
|:----------|:--------|:---------|:---------------------------------------------------------|
| `visible` | boolean | Yes      | Specifies if the control is visible (default is `true`). |
#### Return value
Returns a reference to the `HTML` instance to allow chaining.

## ⛓️ Interfaces {#interfaces}

---
### 🔗 `IHTMLStyle` {#IHTMLStyle}
Describes the interface for the HTML styles.
#### Type declaration
```ts
interface IHTMLStyle {
  /* HTML appearance. */
  appearance?: IStyles;

  /* HTML appearance when fused with form. */
  fused?: IStyles;
}
```