# Egy UI Builder terv JSON formátuma

> Az UI Builder által mentett JSON fájl mezői: metaadatok, a CSS a CLASS helyőrzővel, a komponensfa, bemenetek, kimenetek és argumentumok, a kiinduló sablonokkal példaként.

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

Egy UI Builder terv egyetlen JSON objektum. A tároló kiinduló sablonjai (`public/templates/*.json`) mutatják a mezőit.

| Mező | Jelentés |
|---|---|
| `name`, `description`, `icon`, `version` | a terv metaadatai (az ikon az ikonbetűkészlet egy osztálya, például `ti ti-totaljs`) |
| `type` | a terv fajtája: `app`, `dashboard`, `flowboard` vagy `part` |
| `css` | a terv stílusa. A `CLASS` helyőrzőt a terv egyedi osztálya váltja fel, így a szabályai soha nem szivárognak ki (például `.CLASS:root{--radius:5px}`) |
| `csspublish` | egy `part` stílusa, amelyet mások használatára tesznek közzé |
| `editor` | a szerkesztő beállításai: `download` (egy jelző) és a `paths`, `codes` és `upload` szövegmezők (a sablonok üresen kezdik őket; a használatukat lásd a hivatalos dokumentációban) |
| `components` | honnan jönnek a komponensek: egy objektum a `cdn` mezővel, a könyvtár címével (az app sablonban `https://cdn.componentator.com/uibuilder/app.json`), egy `part` esetén pedig egy objektum, amely az egyes komponensek azonosítóját a szerkesztő-űrlapjuk címéhez rendeli |
| `children` | a terv komponensfája |
| `inputs`, `outputs` | a terv kapcsolatai a külvilággal; a sablonok üres listákkal kezdenek |
| `args` | a terv argumentumai |

## A komponensfa

A `children` csomópontok listája. Minden csomópontnak van:

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

- `id`: a példány azonosítója a terven belül.
- `component`: az azt megjelenítő komponens azonosítója (a kiinduló tervek egy `root` nevű `container` komponenssel kezdődnek).
- `config`: a konfiguráció, amelyet a komponens beállítási űrlapja szerkeszt.
- `children`: a benne lévő csomópontok, ugyanilyen alakban.

Egy komponens követhet egy másikat: ha a `config.path` értéke `@` jellel kezdődik, annak a komponensnek az értékét olvassa és írja, amelynek azonosítója a `@` után áll ([komponens készítése](/en/uibuilder/build-a-component/)).

## Miért számít ez

A terv egyszerű adat: eltárolhatod adatbázisban, összehasonlíthatsz két verziót, generálhatod a saját eszközödből, vagy hagyhatod, hogy az alkalmazásod ügyfelenként válasszon tervet. Egy megjelenítéséhez olvasd el: [terv megjelenítése az oldaladon](/en/uibuilder/render-an-app-in-your-page/).