Καρτέλες, Καρτέλες

Το γραφικό στοιχείο καρτελών χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> για να οργανώσει δεδομένα που έχουν πολλαπλές αναπαραστάσεις, όπως παραδείγματα κώδικα σε διαφορετικές γλώσσες προγραμματισμού ή δομές δεδομένων που αντιπροσωπεύονται από διαφορετικές μορφές (όπως JSON, YAML ή XML).

Γενική χρήση

Το παρακάτω παράδειγμα χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> για την απόδοση τριών ενοτήτων καρτελών χρησιμοποιώντας HTML.

Το παρακάτω παράδειγμα χρησιμοποιεί σύνταξη Markdown για την απόδοση των ίδιων τριών καρτελών.

Γραφικό στοιχείο καρτελών με μενού υπερχείλισης

Το παρακάτω παράδειγμα χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> , αλλά έχει πάρα πολλές καρτέλες για να χωρέσει στην οθόνη και ξεχειλίζει αυτόματα στο αναπτυσσόμενο μενού Περισσότερα .

Το παρακάτω παράδειγμα χρησιμοποιεί σύνταξη Markdown για την απόδοση του ίδιου μενού υπερχείλισης.

Διπλότυπα ονόματα καρτελών σε γραφικά στοιχεία πολλαπλών καρτελών

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

Προσαρμογή γραφικών στοιχείων καρτελών

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

Αναδίπλωση κειμένου σε καρτέλα

Το κείμενο που υπερβαίνει το μέγιστο πλάτος για μια καρτέλα που έχει οριστεί από το DevSite κόβεται και προσαρτάται με ελλείψεις. Το παρακάτω παράδειγμα χρησιμοποιεί την κλάση two-line-tab στο προσαρμοσμένο στοιχείο <devsite-selector> για να αναδιπλώσει κείμενο στη δεύτερη καρτέλα.

Αναδίπλωση κειμένου σε καρτέλα με μικρότερη ετικέτα

Το ακόλουθο παράδειγμα ορίζει two-line-tab στην πρώτη γραμμή και tab-label στη δεύτερη γραμμή στο προσαρμοσμένο στοιχείο <devsite-selector> για να εμφανίζει μια μικρότερη ετικέτα στη δεύτερη γραμμή μιας καρτέλας δύο γραμμών.

Απευθείας σύνδεση σε μια συγκεκριμένη καρτέλα

Το παρακάτω παράδειγμα συνδέεται απευθείας με και ανοίγει μια συγκεκριμένη καρτέλα, καθορίζοντας το id στο προσαρμοσμένο στοιχείο <devsite-selector> .

Δημιουργία συνδέσμου με όλα τα γραφικά στοιχεία ανοιχτά στην ίδια καρτέλα

Ο παρακάτω σύνδεσμος προσαρτά την παράμετρο ερωτήματος ?tab=Apricots στη διεύθυνση URL αυτής της σελίδας και φορτώνει τη σελίδα με την καρτέλα Βερίκοκα ανοιχτή σε όλους τους επιλογείς:

https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots

Το γραφικό στοιχείο καρτελών χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> για να οργανώσει δεδομένα που έχουν πολλαπλές αναπαραστάσεις, όπως παραδείγματα κώδικα σε διαφορετικές γλώσσες προγραμματισμού ή δομές δεδομένων που αντιπροσωπεύονται από διαφορετικές μορφές (όπως JSON, YAML ή XML).

Γενική χρήση

Το παρακάτω παράδειγμα χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> για την απόδοση τριών ενοτήτων καρτελών χρησιμοποιώντας HTML.

Το παρακάτω παράδειγμα χρησιμοποιεί σύνταξη Markdown για την απόδοση των ίδιων τριών καρτελών.

Γραφικό στοιχείο καρτελών με μενού υπερχείλισης

Το παρακάτω παράδειγμα χρησιμοποιεί το προσαρμοσμένο στοιχείο <devsite-selector> , αλλά έχει πάρα πολλές καρτέλες για να χωρέσει στην οθόνη και ξεχειλίζει αυτόματα στο αναπτυσσόμενο μενού Περισσότερα .

Το παρακάτω παράδειγμα χρησιμοποιεί σύνταξη Markdown για την απόδοση του ίδιου μενού υπερχείλισης.

Διπλότυπα ονόματα καρτελών σε γραφικά στοιχεία πολλαπλών καρτελών

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

Προσαρμογή γραφικών στοιχείων καρτελών

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

Αναδίπλωση κειμένου σε καρτέλα

Το κείμενο που υπερβαίνει το μέγιστο πλάτος για μια καρτέλα που έχει οριστεί από το DevSite κόβεται και προσαρτάται με ελλείψεις. Το παρακάτω παράδειγμα χρησιμοποιεί την κλάση two-line-tab στο προσαρμοσμένο στοιχείο <devsite-selector> για να αναδιπλώσει κείμενο στη δεύτερη καρτέλα.

Αναδίπλωση κειμένου σε καρτέλα με μικρότερη ετικέτα

Το ακόλουθο παράδειγμα ορίζει two-line-tab στην πρώτη γραμμή και tab-label στη δεύτερη γραμμή στο προσαρμοσμένο στοιχείο <devsite-selector> για να εμφανίζει μια μικρότερη ετικέτα στη δεύτερη γραμμή μιας καρτέλας δύο γραμμών.

Απευθείας σύνδεση σε μια συγκεκριμένη καρτέλα

Το παρακάτω παράδειγμα συνδέεται απευθείας με και ανοίγει μια συγκεκριμένη καρτέλα, καθορίζοντας το id στο προσαρμοσμένο στοιχείο <devsite-selector> .

Δημιουργία συνδέσμου με όλα τα γραφικά στοιχεία ανοιχτά στην ίδια καρτέλα

Ο παρακάτω σύνδεσμος προσαρτά την παράμετρο ερωτήματος ?tab=Apricots στη διεύθυνση URL αυτής της σελίδας και φορτώνει τη σελίδα με την καρτέλα Βερίκοκα ανοιχτή σε όλους τους επιλογείς:

https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots