ILLA home page
  1. Ομάδα ραδιοφώνου

Μια ραδιοφωνική ομάδα, επίσης γνωστή ως ομάδα μιας επιλογής ή απλά μια ραδιοφωνική ομάδα, είναι ένα στοιχείο που επιτρέπει στους χρήστες να επιλέξουν μόνο μία επιλογή από μια λίστα προκαθορισμένων επιλογών. Κάθε επιλογή στην ομάδα αντιπροσωπεύεται από ένα κυκλικό κουμπί που μπορεί να επιλεγεί ή να αποεκλεγεί από τους χρήστες. Όταν μια επιλογή είναι ενεργοποιημένη, οποιαδήποτε προηγούμενη επιλογή στην ομάδα αποεπιλέγεται αυτόματα.

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

Ιδιότητες

Χειροκίνητες επιλογές

Προσθέστε νέες επιλογές ή διαγράψτε χειροκίνητα και ρυθμίστε τις επιλογές μία προς μία. Οι ιδιότητες των επιλογών είναι οι εξής:

ΙδιότητεςΠεριγραφή
ΕτικέταΤο κείμενο που εμφανίζεται για την επιλογή
ΤιμήΗ τιμή που σχετίζεται με την επιλογή
ΑπενεργοποιημένοΑν η επιλογή είναι απενεργοποιημένη για την επιλογή

Αντιστοιχισμένες επιλογές

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

ΙδιότητεςΠεριγραφή
Πηγή δεδομένωνΟρίστε την πηγή δεδομένων των επιλογών
ΕτικέταΧρησιμοποιήστε {{item}} για να ορίσετε την ετικέτα των επιλογών
ΤιμήΧρησιμοποιήστε {{item}} για να ορίσετε την τιμή των επιλογών
ΑπενεργοποιημένοΧρησιμοποιήστε {{item}} για να ορίσετε αν η επιλογή είναι απενεργοποιημένη για την επιλογή

Άλλες ιδιότητες

ΙδιότητεςΠεριγραφή
Προεπιλεγμένη τιμήΗ αρχική τιμή του εξαρτήματος. Μπορείτε να αλλάξετε δυναμικά την αρχική τιμή πληκτρολογώντας JavaScript στην {{}}.
ΥποκατάστατοΗ τιμή θα εμφανίζεται όταν το πεδίο εισαγωγής είναι κενό.
ΕτικέταΤο όνομα του πεδίου που εμφανίζεται στο χρήστη
ΛεζάνταΜια λεζάντα που χρησιμοποιείται για να περιγράψει λεπτομερώς το πεδίο
Κρυφή ετικέταΟρίστε αν θα εμφανίζεται η ετικέτα
ΘέσηΟρίστε τη θέση της ετικέτας σε σχέση με το στοιχείο
ΕυθυγράμμισηΟρίστε την ευθυγράμμιση της ετικέτας
WidthΌταν η ετικέτα βρίσκεται στην αριστερή πλευρά του εξαρτήματος, ορίστε τον λόγο πλάτους της ετικέτας
Χειριστής ΣυμβάντωνΕρωτήματα ενεργοποίησης, έλεγχος εφαρμογών, ή κλήση άλλων API σε απόκριση σε συμβάντα εφαρμογής.
ΑπενεργοποιημένοΕλέγξτε την κατάσταση του αν το στοιχείο είναι απενεργοποιημένο. Το στοιχείο δεν μπορεί να τροποποιηθεί ή να εστιαστεί όταν είναι απενεργοποιημένο.
Μόνο Για ΑνάγνωσηΕλέγξτε την κατάσταση του αν το στοιχείο είναι μόνο για ανάγνωση. Ένα στοιχείο μόνο για ανάγνωση μπορεί να επιλεγεί και να εστιασθεί, αλλά δεν μπορεί να τροποποιηθεί.
Εμφάνιση κουμπιού καθαρισμούΟρίστε αν θα εμφανίζεται το κουμπί εκκαθάρισης
ΥπόδειξηΟι χρήστες μπορούν να εισάγουν εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown
Απαιτούμενο πεδίοΙσχύει μόνο όταν ο διακόπτης είναι ενεργοποιημένος.
Προσαρμοσμένοι κανόνεςeditor.inspect.setter_tooltip.custom_rule
Απόκρυψη μηνύματος επικύρωσηςΜπορείτε να αποκρύψετε το μήνυμα σφάλματος αλλάζοντας την κρυφή κατάσταση όταν η τιμή εισόδου είναι εσφαλμένη. Μπορείτε να αλλάξετε δυναμικά την κρυφή κατάσταση από JavaScript.
Πλήκτρο Δεδομένων ΦόρμαςΚαθορίστε ένα κλειδί ενός στοιχείου φόρμας περιτυλίγματος κατά την κατασκευή του χαρακτηριστικού δεδομένων.
HiddenΔυναμική ρύθμιση της απόκρυψης του συστατικού. Μπορείτε να αλλάξετε την κρυφή κατάσταση μέσω της δυναμικής δυαδικής τιμής.
Χρώμα θέματοςΓια να επιλέξετε το χρώμα του θέματος του στοιχείου

Μέθοδος

Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες τρεις μεθόδους:

ορισμόςΤιμή

Για να ορίσετε την επιλεγμένη επιλογή, για παράδειγμα, {{”value1”}}

ΙδιότητεςΠεριγραφή
ΤιμήΕπιλεγμένη τιμή

εκκαθάρισηΤιμή

Για να καθαρίσετε τις επιλεγμένες επιλογές

validate

Για να επιβεβαιωθεί ότι οι πληροφορίες εισόδου είναι νόμιμες

clearValidate

Για να καθαρίσετε το μήνυμα επικύρωσης

Χειριστής συμβάντων

Υποστηρίζουμε την ακρόαση της εκδήλωσης onChange της ομάδας ραδιοφώνου.

Όταν αλλάζει η επιλεγμένη επιλογή, μπορεί να ενεργοποιήσει μια καθορισμένη ενέργεια. Αυτό σημαίνει ότι όταν ένας χρήστης επιλέγει μια διαφορετική επιλογή από μια ομάδα ραδιοφώνου, μια συγκεκριμένη ενέργεια μπορεί να αναληφθεί με βάση την επιλεγμένη επιλογή. Για παράδειγμα, σε μορφή ιστού, επιλέγοντας μια διαφορετική επιλογή μπορεί να ενεργοποιήσει την εμφάνιση διαφορετικών πεδίων φόρμας ή την υποβολή του εντύπου σε διαφορετικό προορισμό. Με αυτόν τον τρόπο, η επιλογή που επιλέγεται από τον χρήστη μπορεί να επηρεάσει τη συμπεριφορά του λογισμικού ή της διαδικτυακής εφαρμογής που χρησιμοποιούν. Η δυνατότητα ενεργοποίησης καθορισμένων ενεργειών που βασίζονται στην είσοδο του χρήστη είναι μια σημαντική πτυχή του διαδραστικού σχεδιασμού λογισμικού και μπορεί να βελτιώσει τη χρηστικότητα και τη λειτουργικότητα του λογισμικού.

Δεδομένα

Το στοιχείο έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω {{componentName.propertyName}} στην εφαρμογή.

Όνομα ιδιότηταςΠεριγραφή
τιμήΕπιλεγμένη τιμή

Περίπτωση χρήσης

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

Βήμα 1 Προσθέστε μια ενέργεια

Έχουμε δημιουργήσει έναν πίνακα με το όνομα selection, που περιλαμβάνει 5 στήλες: options_en, options_jp, options_zh, options_kr, value. Αποθηκεύσαμε τις τιμές επιλογών σε value και τις αποθηκευμένες ετικέτες επιλογών σε διαφορετικές γλώσσες σε άλλες στήλες.

Δημιουργήστε μια ενέργεια για να εμφανίσετε όλα τα δεδομένα στο selection με όνομα postgresql1

επιλέξτε * από την επιλογή

Βήμα 2 Διαμόρφωση του εξαρτήματος

  1. Ορίστε τις πηγές δεδομένων σε {{postgresql1.data}}

  2. Ρυθμίστε την ετικέτα για να αλλάξετε την ετικέτα με βάση τη γλώσσα.

    1. Χρησιμοποιήστε {{ item.columnName }} για να ορίσετε τη στήλη.
    2. Χρησιμοποιήστε {{ currentUserInfo.language }} για να ορίσετε τη χρήση της γλώσσας από το ILLA.
    {currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr 
    : currentUserInfo.language == 'zh-CN' ? item.options_zh 
    : item.options_en }}