Το προσαρμοσμένο στοιχείο <devsite-nav-buttons> επιτρέπει σε μια ομάδα κουμπιών να φορτώσει ξανά την τρέχουσα σελίδα με διαφορετική παράμετρο querystring.
Διαδήλωση
Java sample code
Χρήση
Για να το χρησιμοποιήσετε, δημιουργήστε ένα στοιχείο <devsite-nav-buttons> με ένα χαρακτηριστικό name και τοποθετήστε πολλά στοιχεία button με διαφορετικά χαρακτηριστικά value μέσα σε αυτό. Για κάθε ομάδα κουμπιών, επιλέξτε ένα ως προεπιλογή προσθέτοντας ένα default χαρακτηριστικό στο στοιχείο.
<devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Σε ένα αρχείο Markdown ( .md ), βεβαιωθείτε ότι το προσαρμοσμένο στοιχείο είναι τυλιγμένο με ένα τυπικό στοιχείο HTML, όπως μια section , div ή p :
<div> <devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons> </div>
Στη συνέχεια, μπορείτε να χρησιμοποιήσετε δυναμικές ετικέτες που εξετάζουν τις παραμέτρους της συμβολοσειράς ερωτήματος για να προσδιορίσετε ποιο περιεχόμενο θα εμφανίζεται στον χρήστη.
{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}Σύνδεση στη σελίδα με αναγνωριστικό
Κατά γενικό κανόνα, είναι καλύτερο να τοποθετήσετε το στοιχείο <devsite-nav-buttons> κοντά στην κορυφή της σελίδας, καθώς κάνοντας κλικ σε οποιοδήποτε από τα κουμπιά του μεταφέρονται οι χρήστες σε μια νέα διεύθυνση URL και επαναφορτώνεται η σελίδα. Εάν χρησιμοποιείτε το στοιχείο στη μέση μιας σελίδας ή/και θέλετε η θέση του στοιχείου στη σελίδα να είναι σελιδοδείκτης, θα πρέπει να καθορίσετε ένα μοναδικό id στο στοιχείο, το οποίο θα προσαρτήσει μια αγκύρωση με όνομα στη διεύθυνση URL και θα κάνει τη σελίδα να κύλιση στη θέση του στοιχείου κατά τη φόρτωση της σελίδας.
<devsite-nav-buttons name="language" id="code-examples"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Επιλογές παραμέτρων διεύθυνσης URL
Από προεπιλογή, αφού ένας χρήστης κάνει κλικ σε ένα από τα κουμπιά, η τιμή του κουμπιού αποθηκεύεται στο localStorage. Η επιλεγμένη τιμή προστίθεται αυτόματα στη γραμμή διευθύνσεων ως παράμετρος URL σε άλλες σελίδες με στοιχεία <devsite-nav-buttons> που χρησιμοποιούν το ίδιο name και πεδία value .
Καταργήστε την παράμετρο URL για το προεπιλεγμένο κουμπί
Για να παρακάμψετε την προεπιλεγμένη συμπεριφορά και να καταργήσετε την παράμετρο URL όταν κάνετε κλικ στο default κουμπί, προσθέστε param="reset" στο στοιχείο:
<devsite-nav-buttons name="language" param="reset"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Να εμφανίζεται πάντα μια παράμετρος URL για το προεπιλεγμένο κουμπί
Όταν ένας χρήστης επισκέπτεται μια σελίδα με ένα στοιχείο <devsite-nav-buttons> για πρώτη φορά, επισημαίνεται το default κουμπί και δεν υπάρχει αλλαγή στη γραμμή διευθύνσεων μέχρι να γίνει κλικ σε ένα κουμπί.
Για να ενημερώσετε τη γραμμή διευθύνσεων με την παράμετρο URL για το default κουμπί και να βεβαιωθείτε ότι υπάρχει πάντα μια παράμετρος URL σε σελίδες με στοιχείο <devsite-nav-buttons> , προσθέστε param="always" στο στοιχείο:
<devsite-nav-buttons name="language" param="always"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Στυλ με κουμπιά
Από προεπιλογή, τα κουμπιά στο στοιχείο <devsite-nav-buttons> έχουν στυλ "τσιπ". Για να αυξήσετε ή να μειώσετε τον οπτικό αντίκτυπο των κουμπιών, μπορείτε να προσθέσετε ένα χαρακτηριστικό type με τιμή filled ή text , το οποίο θα διαμορφώσει το στυλ κάθε στοιχείου button .
Στυλ κουμπιών με type="filled" :
<devsite-nav-buttons name="language" type="filled"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Στυλ κουμπιών με type="text" :
<devsite-nav-buttons name="language" type="text"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>