# Formát JSON dizajnu UI Builder

> Polia súboru JSON, ktorý ukladá UI Builder: metadáta, CSS so zástupným symbolom CLASS, strom komponentov, vstupy, výstupy a argumenty, s úvodnými šablónami ako príkladmi.

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

Dizajn UI Builder je jeden objekt JSON. Úvodné šablóny v repozitári (`public/templates/*.json`) ukazujú jeho polia.

| Pole | Význam |
|---|---|
| `name`, `description`, `icon`, `version` | metadáta dizajnu (ikona je trieda ikonového písma, napríklad `ti ti-totaljs`) |
| `type` | druh dizajnu: `app`, `dashboard`, `flowboard` alebo `part` |
| `css` | štýl dizajnu. Zástupný symbol `CLASS` sa nahradí jedinečnou triedou dizajnu, takže jeho pravidlá nikdy neunikajú (napríklad `.CLASS:root{--radius:5px}`) |
| `csspublish` | štýl `part`, ktorá je zverejnená pre ostatných |
| `editor` | voľby editora: `download` (príznak) a textové polia `paths`, `codes` a `upload` (šablóny ich začínajú prázdne; ich použitie nájdete v oficiálnej dokumentácii) |
| `components` | odkiaľ pochádzajú komponenty: objekt s `cdn`, adresou knižnice (`https://cdn.componentator.com/uibuilder/app.json` v šablóne app), a v `part` objekt, ktorý priraďuje id každého komponentu adrese jeho formulára editora |
| `children` | strom komponentov dizajnu |
| `inputs`, `outputs` | spojenia dizajnu s okolím; šablóny začínajú s prázdnymi zoznamami |
| `args` | argumenty dizajnu |

## Strom komponentov

`children` je zoznam uzlov. Každý uzol má:

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

- `id`: identifikátor inštancie v dizajne.
- `component`: id komponentu, ktorý ho vykresľuje (úvodné dizajny začínajú `container` s názvom `root`).
- `config`: konfigurácia, ktorú upravuje formulár nastavení komponentu.
- `children`: uzly v ňom, rovnakého tvaru.

Komponent môže nasledovať iný: keď jeho `config.path` začína `@`, číta a zapisuje hodnotu komponentu, ktorého id nasleduje za `@` ([vytvorenie komponentu](/en/uibuilder/build-a-component/)).

## Prečo na tom záleží

Dizajn sú obyčajné dáta: môžete ho uložiť do databázy, porovnať dve verzie, vygenerovať z vlastného nástroja alebo nechať aplikáciu vybrať dizajn pre každého zákazníka. Ako ho zobraziť, nájdete v [vykreslenie dizajnu na vašej stránke](/en/uibuilder/render-an-app-in-your-page/).