Bundle your CSS · System Designer

Σε αυτό το σεμινάριο θα δείξουμε:

πώς να ορίσετε ένα μοντέλο CSS,
πώς να δημιουργήσετε ένα στοιχείο CSS,
πώς να το χρησιμοποιήσετε στην εφαρμογή σας και
πώς να το εγκαταστήσετε σε μια άλλη εφαρμογή.

Υπάρχουν πολλοί τρόποι ομαδοποίησης αρχείων CSS

Αυτό είναι ένα παράδειγμα για το πώς να ομαδοποιήσετε και να εγκαταστήσετε CSS με το System Designer. Αλλά δεν είναι ο μόνος τρόπος. Βρείτε αυτή που ταιριάζει με τις ανάγκες σας.

Ορισμός CSS μοντέλου

First create a schema that:

έχει όνομα CSS
έχει ιδιότητα πηγής και
μια μέθοδο απόδοσης.

Image Alt

Στη συνέχεια, επεξεργαστείτε το μοντέλο:

αλλάξτε τον τύπο της πηγής από οτιδήποτε σε css και
αδειάστε τον πίνακα παραμέτρων της μεθόδου *απόδοσης (render). *.

Image Alt

Code the behavior of render method

Edit the render method of the model as follow:

function render() {
  var div = document.createElement('style');

  div.innerHTML = this.source();
  document.head.appendChild(div);
}

Image Alt

Δημιουργία CSS Στοιχείου

Τώρα δημιουργήστε ένα στοιχείο CSS από τη διεπαφή:

Image Alt

Στη συνέχεια, επεξεργαστείτε το στοιχείο κάνοντας κλικ πάνω του. You will notice that a source tab appears. Θα σας επιτρέψει να προσθέσετε css σας στο στοιχείο σας. Βάλτε το css που θέλετε. In this example we set:

body {
  background-color: gray;
}

Image Alt

What happens?

Επειδή στο μοντέλο λέτε ότι η ιδιότητα πηγής έχει για τον τύπο css. Το System Designer σας επιτρέπει να επεξεργαστείτε αυτήν την ιδιότητα ως CSS. Σημαίνει ότι το System Designer θα ελέγξει ότι το css που γράφετε είναι σωστό.

Στη συνέχεια, κάντε κλικ στην καρτέλα Εφαρμογή για να επεξεργαστείτε την τιμή ιδιότητας _id του στοιχείου:

{
    "_id": "grayColor",
    "source": "body {\n  background-color: gray;\n}"
}

Image Alt

Render your component in your application

Επεξεργαστείτε τη μέθοδο έναρξης του συστήματός σας και:

απαιτούν το στοιχείο CSS και
call the render method.

function start() { 
  this.require('grayColor').render();
}

Image Alt

Run your system

Τώρα μπορείτε να εκτελέσετε το σύστημά σας και να δείτε το αποτέλεσμα.

Image Alt

Install your bundle in another system

Πρώτα, εξάγετε το πακέτο σας κάνοντας κλικ στο κουμπί εξαγωγής. Επιλέξτε JSON για να εξαγάγετε το πακέτο σας σε ένα αρχείο JSON. Το πακέτο σας είναι έτοιμο στη συνέχεια να εισαχθεί σε άλλο σύστημα.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- your bundle -->  
        <link rel="system" type="application/json" href="mycss.json">

        <!-- other systems --> 
        <link rel="system" type="application/json" href="system1.json">
        <link rel="system" type="application/json" href="system2.json">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.min.js"></script>
    </body>
</html>

Περισσότερες Λεπτομέρειες;

See in this guide to have more details on how to install your bundle client-side.

Μπορείτε να συνδυάσετε οποιαδήποτε βιβλιοθήκη CSS

Σχεδιαστής συστήματος σας επιτρέπει να δημιουργήσετε εύκολα επαναχρησιμοποιήσιμα στοιχεία από βιβλιοθήκες css όπως Bootstrap (αυτό το κάνουμε στο σύστημα dvd-collection που μπορείτε να δοκιμάσετε στο σύνολο βιβλιοθήκης συστήματος).