Element po meri <devsite-nav-buttons> omogoča skupini gumbov, da ponovno naložijo trenutno stran z drugačnim parametrom poizvedbenega niza.
Demo
Java sample code
Uporaba
Za uporabo ustvarite element <devsite-nav-buttons> z atributom name in vanj postavite več elementov button z različnimi atributi value . Za vsako skupino gumbov izberite enega kot privzetega, tako da elementu dodate default atribut.
<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>
V datoteki Markdown ( .md ) se prepričajte, da je element po meri ovit s standardnim elementom HTML, kot je section , div ali 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>
Nato lahko uporabite dinamične oznake , ki pregledajo parametre poizvedbenega niza, da določite, katero vsebino želite prikazati uporabniku.
{% 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 %}
Povezovanje na strani z ID-jem
Splošno pravilo je, da je najbolje, da element <devsite-nav-buttons> postavite blizu vrha strani, saj klik na katerega koli gumba vodi uporabnike na nov URL in znova naloži stran. Če uporabljate element na sredini strani in/ali želite, da je mesto elementa na strani mogoče dodati med zaznamke, morate za element podati enoličen id , ki bo naslovu URL dodal imenovano sidro in poskrbel za drsenje strani. na lokacijo elementa, ko se stran naloži.
<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>
Možnosti parametrov URL
Ko uporabnik klikne enega od gumbov, se vrednost gumba privzeto shrani v localStorage. Izbrana vrednost je samodejno dodana v naslovno vrstico kot parameter URL na drugih straneh z elementi <devsite-nav-buttons> , ki uporabljajo ista polja name in value .
Odstranite parameter URL za privzeti gumb
Če želite preglasiti privzeto vedenje in odstraniti parameter URL, ko kliknete default gumb, elementu dodajte 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>
Vedno prikaži parameter URL za privzeti gumb
Ko uporabnik prvič obišče stran z elementom <devsite-nav-buttons> , je default gumb označen in naslovna vrstica se ne spremeni, dokler ne klikne gumba.
Če želite posodobiti naslovno vrstico s parametrom URL za default gumb in zagotoviti, da je na straneh z elementom <devsite-nav-buttons> vedno parameter URL, elementu dodajte 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>
Oblikovanje gumbov
Privzeto imajo gumbi znotraj elementa <devsite-nav-buttons> slog "chip". Če želite povečati ali zmanjšati vizualni učinek gumbov, lahko dodate atribut type z vrednostjo filled ali text , ki bo stiliziral vsak element button .
Oblikovanje gumba z 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>
Oblikovanje 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>