# Formát JSON návrhu UI Builder

> Pole souboru JSON, který ukládá UI Builder: metadata, CSS se zástupným symbolem CLASS, strom komponent, vstupy, výstupy a argumenty, s úvodními šablonami jako příklady.

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

Návrh UI Builder je jeden objekt JSON. Úvodní šablony v repozitáři (`public/templates/*.json`) ukazují jeho pole.

| Pole | Význam |
|---|---|
| `name`, `description`, `icon`, `version` | metadata návrhu (ikona je třída ikonového písma, například `ti ti-totaljs`) |
| `type` | druh návrhu: `app`, `dashboard`, `flowboard` nebo `part` |
| `css` | styl návrhu. Zástupný symbol `CLASS` se nahradí jedinečnou třídou návrhu, takže jeho pravidla nikdy neuniknou (například `.CLASS:root{--radius:5px}`) |
| `csspublish` | styl `part`, která je zveřejněna pro ostatní |
| `editor` | volby editoru: `download` (příznak) a textová pole `paths`, `codes` a `upload` (šablony je začínají prázdná; jejich použití najdete v oficiální dokumentaci) |
| `components` | odkud pocházejí komponenty: objekt s `cdn`, adresou knihovny (`https://cdn.componentator.com/uibuilder/app.json` v šabloně app), a v `part` objekt, který přiřazuje id každé komponenty adrese jejího formuláře editoru |
| `children` | strom komponent návrhu |
| `inputs`, `outputs` | spojení návrhu s okolím; šablony začínají s prázdnými seznamy |
| `args` | argumenty návrhu |

## Strom komponent

`children` je seznam uzlů. Každý uzel má:

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

- `id`: identifikátor instance v návrhu.
- `component`: id komponenty, která jej vykresluje (úvodní návrhy začínají `container` s názvem `root`).
- `config`: konfigurace, kterou upravuje formulář nastavení komponenty.
- `children`: uzly v něm, stejného tvaru.

Komponenta může následovat jinou: když její `config.path` začíná `@`, čte a zapisuje hodnotu komponenty, jejíž id následuje za `@` ([vytvoření komponenty](/en/uibuilder/build-a-component/)).

## Proč na tom záleží

Návrh jsou prostá data: můžete jej uložit do databáze, porovnat dvě verze, vygenerovat z vlastního nástroje nebo nechat aplikaci vybrat návrh pro každého zákazníka. Jak jej zobrazit, najdete v [vykreslení návrhu na vaší stránce](/en/uibuilder/render-an-app-in-your-page/).