ILLA components
Η ILLA παρέχει δεκάδες προκατασκευασμένα εξαρτήματα για γρήγορη κατασκευή διεπαφών πρόσοψης ιστού.
Λίστα στοιχείων
- Είσοδος: Χρησιμοποιείται για να εισαχθεί η μικρότερη συμβολοσειρά από τους χρήστες

- Είσοδος αριθμού: Χρησιμοποιείται για να εισαχθεί ένας αριθμός από χρήστες.
.png)
- Επεξεργάσιμο κείμενο: Χρησιμοποιείται για να εμφανίσετε μια συμβολοσειρά και να μεταβείτε σε μια λειτουργία επεξεργασίας όταν πατηθεί.
.png)
- Είσοδος Textarea: χρησιμοποιείται για να πάρει το μεγάλο string που εισάγεται από τους χρήστες
.png)
- Μεταφόρτωση: Χρησιμοποιείται για να επιλέξετε τοπικά αρχεία και να τα αναλύσετε σε δεδομένα base64. Κάντε κλικ εδώ για να μάθετε περισσότερα σχετικά με το Upload
.png)
- Έρχεται σύντομα
- Εγγραφή
- Ρυθμιστικό
- Range slider
- Είσοδος πλούσιου κειμένου
- JSON editor
Επιλογή εισόδων
- Διακόπτης: Ένας διακόπτης που μπορεί να επιστρέψει αληθής ή ψευδής
.png)
- Επιλογή: Εμφανίζει όλες τις επιλογές στο αναπτυσσόμενο μενού και επιτρέπει στους χρήστες να επιλέξουν
.png)
- Ομάδα ραδιοφώνου: Εμφανίζει όλες τις επιλογές και επιτρέπει στους χρήστες να επιλέξουν μία από αυτές
.png)
- Ομάδα Checkbox: Εμφάνισε όλες τις επιλογές και επέτρεψε στους χρήστες να επιλέξουν πολλαπλές επιλογές
.png)
- Cascader: Χρησιμοποιείται για να εμφανίσει και να επιλέξει ένα σύνολο από το συνδεδεμένο σύνολο δεδομένων
.png)
- Κουμπί ραδιοφώνου: Εμφάνιση όλων των επιλογών σε στυλ κουμπιού. Επιτρέψτε στους χρήστες να επιλέξουν ένα από αυτά.
.png)
- Έρχεται σύντομα
- Πολλαπλή επιλογή
- Επιλογή δέντρου
Εισροές ημερολογίου
- Ημερομηνία: Χρησιμοποιείται για να εισάγετε μια ημερομηνία. Να επιτρέπεται η προσαρμοσμένη μορφή δεδομένων.
.png)
- Εύρος ημερομηνιών : Χρησιμοποιείται για να εισάγετε ένα εύρος ημερομηνιών. Να επιτρέπεται η προσαρμοσμένη μορφή δεδομένων.
.png)
- Ημερομηνία ώρα: Χρησιμοποιείται για να εισάγετε μια ημερομηνία και ώρα. Να επιτρέπεται η προσαρμοσμένη μορφή δεδομένων.
.png)
Παρουσίαση
- Κείμενο: Χρησιμοποιείται για την εμφάνιση συμβολοσειρών και επιτρέπει τη λήψη δυναμικών δεδομένων από JavaSript. Υποστήριξη σύνταξης markdown Κάνε κλικ εδώ για να μάθεις περισσότερα σχετικά με αυτό.
.png)
- Εικόνα: Χρησιμοποιείται για την εμφάνιση εικόνων. Η πηγή της εικόνας μπορεί να είναι ένα URL ή base64 δεδομένα.
.png)
- Κουμπί: Κάντε κλικ για να ενεργοποιήσετε την αντίστοιχη επιχειρηματική λογική
.png)
- Εικονίδιο: Χρησιμοποιείται για την έκφραση ενεργειών, την κατάσταση, την κατηγοριοποίηση δεδομένων και την ενεργοποίηση γεγονότων όταν κάνετε κλικ
.png)
- Στατιστικά: Χρησιμοποιείται για την εμφάνιση στατιστικού αριθμού
.png)
- Τιμή: Χρησιμοποιείται για εισαγωγή ή εμφάνιση αξιολογήσεων
.png)
- Πρόοδος μπάρας: Χρησιμοποιείται για την εμφάνιση της προόδου
.png)
- Κύκλος πρόοδος: Χρησιμοποιείται για την εμφάνιση της προόδου
.png)
- Χρονοδιάγραμμα: Χρησιμοποιείται για να εμφανίσει πληροφορίες ροής χρόνου, γενικά καταγράφει γεγονότα εγκαίρως από flashback, παρακολούθηση του τι κάνει τώρα ο χρήστης και τι έχει κάνει στο παρελθόν.
.png)
- Διαχωριστικό: Χρησιμοποιείται σε διαφορετικό περιεχόμενο
.png)
- Καρτέλες: Καρτέλες κατηγοριοποιούν το περιεχόμενο, προκειμένου να παρουσιάσουν μια μεγάλη ποσότητα πληροφοριών σε περιορισμένο χώρο. Οι χρήστες μπορούν εύκολα να αλλάξουν μεταξύ των πάνελ καρτελών χωρίς μετάβαση από τη μια σελίδα στην άλλη
.png)
- Μενού: Χρησιμοποιείται για την εμφάνιση της δομής σελίδων, τον έλεγχο της σελίδας άλμα ή την ενεργοποίηση άλλων γεγονότων
.png)
- Περιέκτης: Στοιχεία ομάδας σε κάρτες που υποστηρίζουν πολλαπλές προβολές. Κάντε κλικ εδώ για να μάθετε περισσότερα
.png)
- Μορφή: Πακέτο των δεδομένων των στοιχείων εισόδου σε ένα αντικείμενο ως τιμή του στοιχείου της φόρμας, το οποίο μπορεί να υποβληθεί απευθείας στο API
.png)
- Λίστα: Προσαρμογή των στοιχείων στη λίστα και εμφάνιση των δεδομένων
.png)
- Μοντέλο: Στοιχεία επίδειξης ή να εκτελέσει τις λειτουργίες μέσω ενός επιπλέοντος στρώματος, καθιστώντας την αλληλεπίδραση διεπαφών χρηστών πιο φιλική
.png)
- PDF: Υποστηρίξτε μια διεύθυνση URL PDF ή κωδικοποιημένα σε base64 δεδομένα
.png)
- Βίντεο: Υποστηρίξτε τις περισσότερες υπηρεσίες βίντεο ή μια άμεση σύνδεση με οποιοδήποτε κοινό τύπο αρχείου βίντεο.
.png)
- Καρουσέλ: Εικόνα καρουσέλ.
.png)
- Έρχεται σύντομα
- Ήχος
- Βήματα
- Πτυσσόμενα
- Πλαίσιο χάρτη
Δεδομένα
- Διάγραμμα: Οπτικοποιήστε τα δεδομένα σας, το γράφημα στήλης υποστήριξης, το γράφημα γραμμής, το γράφημα διασποράς, το γράφημα πίτας. Κάνε κλικ εδώ για να μάθεις περισσότερα σχετικά με αυτό.
.png)
- Πίνακας: Ένας κοινός τρόπος για να δείτε και να αλληλεπιδράσετε με τα δεδομένα σας. Μπορείτε να ταξινομήσετε, φίλτρο, σελιδοποίηση, και να κατεβάσετε τις σειρές πληροφοριών. Πίνακες υποστηρίζουν επίσης την επιλογή γραμμών και προσαρμοσμένες στήλες. Κάνε κλικ εδώ για να μάθεις περισσότερα σχετικά με αυτό.
Αναζήτηση για ένα στοιχείο
Μπορείτε να κάνετε κλικ στην καρτέλα INSERT στον δεξιό πίνακα για να εισάγετε τη λίστα συστατικών. Εισάγετε το όνομα της συνιστώσας και αναζητήστε το στοιχείο μέσω του πλαισίου εισόδου παραπάνω. (Automatic Translation)
.png)
Χρήση χειριστή συμβάντων για την ενεργοποίηση συμβάντων
Λήψη του στοιχείου κουμπιού ως παράδειγμα, μπορείτε να ορίσετε έναν χειριστή συμβάντος για το εξάρτημα με τον τρόπο της εικόνας που φαίνεται να ενεργοποιεί μια ενέργεια ή να ελέγχει άλλα εξαρτήματα, κλπ. Όταν κάνετε κλικ σε ένα στοιχείο, ή όταν τα δεδομένα του στοιχείου αλλάζουν, τα αντίστοιχα γεγονότα μπορούν να ενεργοποιηθούν.
.png)
Χρήση των δεδομένων εφαρμογής σε ενέργειες
Μπορείτε να χρησιμοποιήσετε τα δεδομένα των στοιχείων σε ενέργειες ή άλλα εξαρτήματα. Λαμβάνοντας ως παράδειγμα, το στοιχείο εισόδου μπορείτε να χρησιμοποιήσετε το {{input1.value}} για να λάβετε την εισαγόμενη τιμή στην εφαρμογή. Διαφορετικά εξαρτήματα μπορεί να έχουν διαφορετικούς μορφότυπους δεδομένων. Παρακαλώ δείτε τις μορφές δεδομένων μέσω του αριστερού πίνακα.
.png)