Formát JSON dizajnu UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

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á:

{
	"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).

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.