Η μορφή 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 έρχεται μετά το @ (δημιουργία μιας συνιστώσας).

Γιατί έχει σημασία

Ο σχεδιασμός είναι απλά δεδομένα: μπορείτε να τον αποθηκεύσετε σε βάση δεδομένων, να συγκρίνετε δύο εκδόσεις, να τον παράγετε από το δικό σας εργαλείο ή να αφήσετε την εφαρμογή σας να επιλέγει σχεδιασμό ανά πελάτη. Για να δείξετε έναν, διαβάστε απόδοση ενός σχεδιασμού στη σελίδα σας.