Skip to main content

Configuration by type

The type property defines the kind of HTML element you are going to create.

You can see most of them as shortcuts to reduce the definition boilerplate.

Layout types​

Layout types are shortcuts to create the layout of other HTML elements.

flex-row​

flex-row is a shortcut for an element with:

  • div as tag;
  • display: flex; flex-direction: row as style attribute.

E.g., this configuration:

{
  "type": "flex-row"
}

Will produce:

<div style="display: flex; flex-direction: row"></div>

flex-column​

flex-column is a shortcut for an element with:

  • div as tag;
  • display: flex; flex-direction: column as style attribute.

E.g., this configuration:

{
  "type": "flex-column"
}

Will produce:

<div style="display: flex; flex-direction: column"></div>

General types​

element​

element type allows you to create an element with a custom tag, through the mandatory tag field.
Also, you can specify the optional url field, useful to load the entry point JavaScript of a Web Component.

E.g., this configuration:

{
  "type": "element",
  "tag": "orchy-wc",
  "url": "https://orchy-wc.entry/point.js"
}

Will produce:

<orchy-wc></orchy-wc>

micro-frontend​

micro-frontend type allows you to create an element with a custom tag, through the mandatory tag field.
Also, you can specify the optional url field, useful to load the entry point JavaScript of your application.

E.g., this configuration:

{
  "type": "micro-frontend",
  "tag": "react-mfe",
  "url": "https://react-mfe.entry/point.js"
}

Will produce:

<react-mfe></react-mfe>
caution

For the micro-frontend type, all the attributes and properties will be aggregated and then injected in a single property called orchyProperties.