# Formatul JSON al unui design UI Builder

> Câmpurile fișierului JSON pe care îl salvează UI Builder: metadate, CSS-ul cu substituentul CLASS, arborele de componente, intrări, ieșiri și argumente, cu șabloanele de pornire ca exemple.

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

Un design UI Builder este un singur obiect JSON. Șabloanele de pornire din depozit (`public/templates/*.json`) arată câmpurile lui.

| Câmp | Semnificație |
|---|---|
| `name`, `description`, `icon`, `version` | metadatele designului (pictograma este o clasă a fontului de pictograme, ca `ti ti-totaljs`) |
| `type` | tipul designului: `app`, `dashboard`, `flowboard` sau `part` |
| `css` | stilul designului. Substituentul `CLASS` este înlocuit cu o clasă unică a designului, astfel încât regulile lui nu se scurg niciodată (de exemplu `.CLASS:root{--radius:5px}`) |
| `csspublish` | stilul unui `part` care este publicat pentru ca alții să îl folosească |
| `editor` | opțiuni ale editorului: `download` (un indicator) și câmpurile text `paths`, `codes` și `upload` (șabloanele pornesc cu ele goale; vezi documentația oficială pentru utilizarea lor) |
| `components` | de unde vin componentele: un obiect cu `cdn`, adresa bibliotecii (`https://cdn.componentator.com/uibuilder/app.json` în șablonul app), iar într-un `part` un obiect care asociază id-ul fiecărei componente cu adresa formularului ei din editor |
| `children` | arborele de componente al designului |
| `inputs`, `outputs` | conexiunile designului cu exteriorul; șabloanele pornesc cu liste goale |
| `args` | argumentele designului |

## Arborele de componente

`children` este o listă de noduri. Fiecare nod are:

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

- `id`: identificatorul instanței în interiorul designului.
- `component`: id-ul componentei care îl randează (designurile de pornire încep cu un `container` numit `root`).
- `config`: configurația pe care o editează formularul de setări al componentei.
- `children`: nodurile din interiorul lui, cu aceeași formă.

O componentă poate urma alta: când `config.path` al ei începe cu `@`, citește și scrie valoarea componentei al cărei id urmează după `@` ([construiește o componentă](/en/uibuilder/build-a-component/)).

## De ce contează

Designul este o simplă dată: îl poți stoca într-o bază de date, poți compara două versiuni, îl poți genera din propriul instrument sau poți lăsa aplicația ta să aleagă un design pentru fiecare client. Pentru a afișa unul, citește [randarea unui design în pagina ta](/en/uibuilder/render-an-app-in-your-page/).