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]
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": [ ]
}
}
]
}