Formát JSON návrhu UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

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

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

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.