Skip to main content

au-widget-html/IHtmlConfig

Interfaces​

IHtmlConfig​

Provides properties for the html widget.

You can use these properties in params of the AuWidgetHtml class.

{
  "widgets": [
    {
      "name": "data-based",
      "type": "html",
      "title": "HTML with data",
      "params": {
        "data": [
          {
            "title": "Color",
            "value": "Space Gray"
          },
          {
            "title": "Shape",
            "value": "Rounded Rect"
          }
        ],
        "template": {
          "<>": "div",
          "html": [
            {
              "<>": "span",
              "text": "${title}: ",
              "style": "font-weight: bold"
            },
            {
              "<>": "span",
              "text": "${value}"
            }
          ]
        }
      }
    }
  ]
}

This will result in:

<div>
  <span style="font-weight: bold">Color: </span>
  <span>Space Gray</span>
</div>
<div>
  <span style="font-weight: bold">Shape: </span>
  <span>Rounded Rect</span>
</div>

Properties​

data?​
optional data?: any;

The content to display.

template​
template:
  | ITemplateConfig
  | ITemplateConfig[];

A markup template to format the content.

ITemplateConfig​

Provides markup elements to format an HTML page.

Properties​

<>?
optional <>?: string;

A nested element.

class?​
optional class?: string;

A CSS class.

html?​
optional html?: ITemplateConfig;

An inner HTML code.

id?​
optional id?: string;

An ID of a DOM element.

style?​
optional style?: string;

An inline style.

text?​
optional text?: string;

A text node.

Was this page helpful?