Prilagođeni element <devsite-nav-buttons> omogućuje grupi gumba ponovno učitavanje trenutne stranice s različitim parametrom niza upita.
Demo
Java sample code
Korištenje
Za korištenje stvorite element <devsite-nav-buttons> s atributom name i unutar njega postavite više elemenata button s različitim atributima value . Za svaku grupu gumba odaberite jedan kao zadani dodavanjem default atributa elementu.
<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>
U Markdown ( .md ) datoteci provjerite je li prilagođeni element omotan standardnim HTML elementom, kao što je section , div ili 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>
Zatim možete koristiti dinamičke oznake koje ispituju parametre niza upita kako biste odredili koji sadržaj prikazati korisniku.
{% 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 %}
Povezivanje unutar stranice s ID-om
Kao opće pravilo, najbolje je postaviti element <devsite-nav-buttons> pri vrhu stranice budući da klik na bilo koji od njegovih gumba vodi korisnike na novi URL i ponovno učitava stranicu. Ako koristite element u sredini stranice i/ili želite da se lokacija elementa na stranici može označavati, trebali biste navesti jedinstveni id na elementu, koji će dodati imenovano sidro URL-u i učiniti da se stranica pomiče na lokaciju elementa kada se stranica učita.
<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>
Opcije parametara URL-a
Prema zadanim postavkama, nakon što korisnik klikne jedan od gumba, vrijednost gumba sprema se u localStorage. Odabrana vrijednost automatski se dodaje u adresnu traku kao parametar URL-a na drugim stranicama s elementima <devsite-nav-buttons> koji koriste ista polja name i value .
Uklonite URL parametar za zadani gumb
Za nadjačavanje zadanog ponašanja i uklanjanje URL parametra kada se klikne default gumb, dodajte param="reset" elementu:
<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>
Uvijek prikaži URL parametar za zadani gumb
Kada korisnik prvi put posjeti stranicu s elementom <devsite-nav-buttons> , default gumb je istaknut i nema promjena na adresnoj traci dok se ne klikne gumb.
Da biste adresnu traku ažurirali parametrom URL-a za default gumb i osigurali da uvijek postoji parametar URL-a na stranicama s elementom <devsite-nav-buttons> , dodajte param="always" elementu:
<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>
Stiliziranje gumba
Prema zadanim postavkama, gumbi unutar elementa <devsite-nav-buttons> imaju "chip" stil. Da biste povećali ili smanjili vizualni učinak gumba, možete dodati atribut type s vrijednošću filled ili text , koji će stilizirati svaki element button .
Stil gumba s 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>
Stil gumba s 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>