JSON форматът на дизайн на UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

Дизайнът на UI Builder е един JSON обект. Началните шаблони на хранилището (public/templates/*.json) показват полетата му.

Поле	Значение
`name`, `description`, `icon`, `version`	метаданните на дизайна (иконата е клас на шрифта с икони, като `ti ti-totaljs`)
`type`	видът дизайн: `app`, `dashboard`, `flowboard` или `part`
`css`	стилът на дизайна. Заместителят `CLASS` се заменя с уникален клас на дизайна, така че правилата му никога не изтичат (например `.CLASS:root{--radius:5px}`)
`csspublish`	стилът на `part`, който се публикува за ползване от други
`editor`	опции на редактора: `download` (флаг) и текстовите полета `paths`, `codes` и `upload` (шаблоните започват с тях празни; вижте официалната документация за употребата им)
`components`	откъде идват компонентите: обект с `cdn`, адреса на библиотеката (`https://cdn.componentator.com/uibuilder/app.json` в шаблона app), а в `part` обект, който съпоставя id на всеки компонент с адреса на формата му в редактора
`children`	дървото на компонентите на дизайна
`inputs`, `outputs`	връзките на дизайна с външния свят; шаблоните започват с празни списъци
`args`	аргументите на дизайна

Дървото на компонентите

children е списък от възли. Всеки възел има:

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

id: идентификаторът на инстанцията в дизайна.
component: id на компонента, който го визуализира (началните дизайни започват с container на име root).
config: конфигурацията, която редактира формата за настройки на компонента.
children: възлите в него, със същата форма.

Един компонент може да следва друг: когато неговият config.path започва с @, той чете и записва стойността на компонента, чийто id идва след @ (създаване на компонент).

Защо това има значение

Дизайнът са прости данни: можете да го съхраните в база данни, да сравните две версии, да го генерирате от собствен инструмент или да оставите приложението си да избира дизайн за всеки клиент. За да покажете един, прочетете визуализиране на дизайн във вашата страница.