Skip to main content
Version: Next

Properties

Properties are properties that set by user from Properties. These properties contain the element specific properties that you can set on the element without using any css classes.

  • Shortcut Ctrl+Shift+Q to open the User Properties.
{
"components": [
{
"className": ".sf-page",
"id": "7105-57b3-8a5a-b429",
"initialized": true,
"props": {
"children": [
"c4bd-3fbf-b589-aad0",
"8f4c-f6e8-b256-a656",
"d7d1-9be7-89b8-0e47"
],
"name": "pgTest",
"orientation": "PORTRAIT",
"parent": null
},
"type": "Page",
"userProps": {}
},
{
"className": ".sf-statusBar",
"id": "c4bd-3fbf-b589-aad0",
"props": {
"children": [],
"isRemovable": false,
"name": "statusBar",
"parent": "7105-57b3-8a5a-b429"
},
"type": "StatusBar",
"userProps": {
"visible": true
}
},
{
"className": ".sf-headerBar",
"id": "8f4c-f6e8-b256-a656",
"props": {
"children": [],
"isRemovable": false,
"name": "headerBar",
"parent": "7105-57b3-8a5a-b429",
"title": "Test"
},
"type": "HeaderBar",
"userProps": {
"title": "Test"
}
},
{
"className": ".sf-materialTextBox #pgTest-materialTextBox1",
"id": "d7d1-9be7-89b8-0e47",
"props": {
"children": [],
"hint": "hintHere",
"name": "materialTextBox1",
"parent": "7105-57b3-8a5a-b429",
"text": "yourSampleText"
},
"type": "MaterialTextBox",
"userProps": {
"hint": "hintHere",
"text": "yourSampleText"
}
}
]
}
info
  • Using the properties of the element you can set the element specific properties.
  • The properties are applied to the UI elements, that are created by the user.
  • The properties are going to be applied to the UI element's .cpx file, under the userProps and props.
Using Style and Classes