# Η μορφή JSON ενός σχεδιασμού UI Builder

> Τα πεδία του αρχείου JSON που αποθηκεύει το UI Builder: μεταδεδομένα, το CSS με το σύμβολο κράτησης CLASS, το δέντρο συνιστωσών, είσοδοι, έξοδοι και ορίσματα, με τα αρχικά πρότυπα ως παραδείγματα.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: el
Content-SHA256: a43c00871fb0c03390eaa13588a85875b95e83806b1214115ce5851f3893a296
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Ένας σχεδιασμός 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` είναι μια λίστα κόμβων. Κάθε κόμβος έχει:

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

- `id`: το αναγνωριστικό της παρουσίας μέσα στον σχεδιασμό.
- `component`: το id της συνιστώσας που τον αποδίδει (οι αρχικοί σχεδιασμοί ξεκινούν με ένα `container` με όνομα `root`).
- `config`: η διαμόρφωση που επεξεργάζεται η φόρμα ρυθμίσεων της συνιστώσας.
- `children`: οι κόμβοι μέσα σε αυτόν, με την ίδια μορφή.

Μια συνιστώσα μπορεί να ακολουθεί μια άλλη: όταν το `config.path` της ξεκινά με `@`, διαβάζει και γράφει την τιμή της συνιστώσας της οποίας το id έρχεται μετά το `@` ([δημιουργία μιας συνιστώσας](/en/uibuilder/build-a-component/)).

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

Ο σχεδιασμός είναι απλά δεδομένα: μπορείτε να τον αποθηκεύσετε σε βάση δεδομένων, να συγκρίνετε δύο εκδόσεις, να τον παράγετε από το δικό σας εργαλείο ή να αφήσετε την εφαρμογή σας να επιλέγει σχεδιασμό ανά πελάτη. Για να δείξετε έναν, διαβάστε [απόδοση ενός σχεδιασμού στη σελίδα σας](/en/uibuilder/render-an-app-in-your-page/).