# JSON форматът на дизайн на UI Builder

> Полетата на JSON файла, който UI Builder записва: метаданни, CSS със заместителя CLASS, дървото на компонентите, входове, изходи и аргументи, с началните шаблони като примери.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: bg
Content-SHA256: 51b01673381dbe09dc4502c552b163cbf9f2e798b1afc2a782e5808488f1b7d0
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Дизайнът на UI Builder е един JSON обект. Началните шаблони на хранилището (`public/templates/*.json`) показват полетата му.

| Поле | Значение |
|---|---|
| `name`, `description`, `icon`, `version` | метаданните на дизайна (иконата е клас на шрифта с икони, като `ti ti-totaljs`) |
| `type` | видът дизайн: `app`, `dashboard`, `flowboard` или `part` |
| `css` | стилът на дизайна. Заместителят `CLASS` се заменя с уникален клас на дизайна, така че правилата му никога не изтичат (например `.CLASS:root{--radius:5px}`) |
| `csspublish` | стилът на `part`, който се публикува за ползване от други |
| `editor` | опции на редактора: `download` (флаг) и текстовите полета `paths`, `codes` и `upload` (шаблоните започват с тях празни; вижте официалната документация за употребата им) |
| `components` | откъде идват компонентите: обект с `cdn`, адреса на библиотеката (`https://cdn.componentator.com/uibuilder/app.json` в шаблона app), а в `part` обект, който съпоставя id на всеки компонент с адреса на формата му в редактора |
| `children` | дървото на компонентите на дизайна |
| `inputs`, `outputs` | връзките на дизайна с външния свят; шаблоните започват с празни списъци |
| `args` | аргументите на дизайна |

## Дървото на компонентите

`children` е списък от възли. Всеки възел има:

```json
{
	"id": "root",
	"component": "container",
	"config": { "name": "Container" },
	"children": []
}
```

- `id`: идентификаторът на инстанцията в дизайна.
- `component`: id на компонента, който го визуализира (началните дизайни започват с `container` на име `root`).
- `config`: конфигурацията, която редактира формата за настройки на компонента.
- `children`: възлите в него, със същата форма.

Един компонент може да следва друг: когато неговият `config.path` започва с `@`, той чете и записва стойността на компонента, чийто id идва след `@` ([създаване на компонент](/en/uibuilder/build-a-component/)).

## Защо това има значение

Дизайнът са прости данни: можете да го съхраните в база данни, да сравните две версии, да го генерирате от собствен инструмент или да оставите приложението си да избира дизайн за всеки клиент. За да покажете един, прочетете [визуализиране на дизайн във вашата страница](/en/uibuilder/render-an-app-in-your-page/).