wrapper - абстракция для группировки полей, виджетов и других враперов в горизонтальный или вертикальный список.
Использование враперов позволяет задавать подобные структуры на экране
Основной набор свойств для определения размеров и местоположений у полей, виджетов и враперов единый:
| Свойство | Тип | Комментарий |
|---|---|---|
| order | int | порядковый номер элемента в на текущем уровне |
| align* | string | start/end/center |
| paddingTop | int | - |
| paddingBottom | int | - |
| paddingLeft | int | - |
| paddingRight | int | - |
| paddingMeasure | % | px |
| marginTop | int | - |
| marginBottom | int | - |
| marginLeft | int | - |
| marginRight | int | - |
| marginMeasure | % | px |
Особые свойства для врапера:
| Свойство | Тип | Комментарий |
|---|---|---|
| direction | string | Направление контента: column/row |
| contentAlign* | string | start/center/end/space-between/space-around* |
Влияние contentAlign, как настройки врапера
Влияние align, как настройки контента, в контейнере/экране
{
"node": {
"id": 114042,
"name": "example",
"title": "Example",
"screens": [
{
"id": 114046,
"name": "screen1",
"title": "Screen 1",
"nodeType": "screen",
"properties": {},
"nodeFields": [
{
"id": 114059,
"name": "wrapper",
"nodeType": "wrapper",
"properties": {
"direction": "column"
},
"nodeFields": [
{
"id": 114059,
"name": "wrapper",
"nodeType": "wrapper",
"properties": {
"direction": "row"
},
"nodeFields": [
{
"id": 114059,
"name": "wrapper",
"nodeType": "wrapper",
"properties": {
"direction": "column"
},
"nodeFields": [
{
"id": 114078,
"name": "form2.employed.screen.2.block.1",
"nodeType": "field",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h2'>Working address</span>"
}
},
{
"id": 114078,
"name": "form2.employed.screen.2.block.2",
"nodeType": "field",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h2'>Working address</span>"
}
},
{
"id": 114078,
"name": "form2.employed.screen.2.block.3",
"nodeType": "field",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h2'>Working address</span>"
}
}
]
},
{
"id": 114078,
"name": "form2.employed.screen.2.block.3",
"nodeType": "field",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h2'>Working address</span>"
}
}
]
},
{
"id": 114078,
"name": "form2.employed.screen.2.block.2",
"nodeType": "field",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h2'>Working address</span>"
}
}
]
}
]
}
]
}
}