Skip to main content

Features - Component Designer

Configuration Object

In your IDE of choice, create a new .json-file.

The first thing we need to define, is the component identifier, a short description and an empty array of elements:

{
  "key": "card-component",
  "description": "A simple content card",
  "elements": []
}

Elements​

The elements-property is an array of objects, containing a name, a selector for the element, a type and an array of properties:

{
  "name": "Image",
  "selector": "img",
  "type": "property",
  "properties": []
}

name is the display-name the element will have in the visual editor.

selector is a querySelector to target a sub-node within the component, and can be any valid querySelector:

  • #id
  • tag
  • .class
  • [attribute]
tip

The reserved value, self refers to the component-indetifier itself (the selector, containing data-pf)

type can be:

  • class (default, can be omitted)
  • property Sets a CSS Custom Property instead of toggling classes

properties is an array of objects:

[
  {
    "name": "Aspect Ratio",
    "ui": "ui-dropdown",
    "values": []
  }
]

name is the value displayed for the control in the visual editor.

ui can be:

  • ui-buttongroup
  • ui-colorgroup
  • ui-dropdown
  • ui-fontlist
  • ui-icongroup
  • ui-iconlist
  • ui-iconlist-compact
  • ui-range (only if type is set to property)

values is an array of property-values:

{
  "name": "1:1",
  "value": "ar-square"
}

These will always consist of name and value. For some ui-controls, a third property, display is required. More on that in the UI-controls documentation.

Let's move on with our Card component-configuration, as we can now progress with the elements:

{
  "key": "card-component",
  "description": "A simple content card",
  "elements": [
    {
      {
        "name": "Main",
        "selector": "content-inner",
        "properties": [ ]
      },
      {
        "name": "Image",
        "selector": "img",
        "properties": [ ]
      },
      {
        "name": "Headline",
        "selector": "h2",
        "properties": [ ]
      }
    }
  ]
}