ro
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Magyar
Svenska
Ελληνικά
БългарскиFormatul JSON al unui design UI Builder
Un design UI Builder este un singur obiect JSON. Șabloanele de pornire din depozit (public/templates/*.json) arată câmpurile lui.
| Câmp | Semnificație |
|---|---|
name, description, icon, version | metadatele designului (pictograma este o clasă a fontului de pictograme, ca ti ti-totaljs) |
type | tipul designului: app, dashboard, flowboard sau part |
css | stilul designului. Substituentul CLASS este înlocuit cu o clasă unică a designului, astfel încât regulile lui nu se scurg niciodată (de exemplu .CLASS:root{--radius:5px}) |
csspublish | stilul unui part care este publicat pentru ca alții să îl folosească |
editor | opțiuni ale editorului: download (un indicator) și câmpurile text paths, codes și upload (șabloanele pornesc cu ele goale; vezi documentația oficială pentru utilizarea lor) |
components | de unde vin componentele: un obiect cu cdn, adresa bibliotecii (https://cdn.componentator.com/uibuilder/app.json în șablonul app), iar într-un part un obiect care asociază id-ul fiecărei componente cu adresa formularului ei din editor |
children | arborele de componente al designului |
inputs, outputs | conexiunile designului cu exteriorul; șabloanele pornesc cu liste goale |
args | argumentele designului |
Arborele de componente
children este o listă de noduri. Fiecare nod are:
{
"id": "root",
"component": "container",
"config": { "name": "Container" },
"children": []
}id: identificatorul instanței în interiorul designului.component: id-ul componentei care îl randează (designurile de pornire încep cu uncontainernumitroot).config: configurația pe care o editează formularul de setări al componentei.children: nodurile din interiorul lui, cu aceeași formă.
O componentă poate urma alta: când config.path al ei începe cu @, citește și scrie valoarea componentei al cărei id urmează după @ (construiește o componentă).
De ce contează
Designul este o simplă dată: îl poți stoca într-o bază de date, poți compara două versiuni, îl poți genera din propriul instrument sau poți lăsa aplicația ta să aleagă un design pentru fiecare client. Pentru a afișa unul, citește randarea unui design în pagina ta.