Elementul personalizat <devsite-nav-buttons> permite unui grup de butoane să reîncarce pagina curentă cu un parametru de șir de interogare diferit.
Demo
Java sample code
Utilizare
Pentru a utiliza, creați un element <devsite-nav-buttons> cu un atribut name și plasați mai multe elemente button cu atribute value diferite în interiorul acestuia. Pentru fiecare grup de butoane, selectați unul ca implicit, adăugând un atribut default la element.
<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>
Într-un fișier Markdown ( .md ), asigurați-vă că elementul personalizat este împachetat cu un element HTML standard, cum ar fi o section , div sau 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>
Puteți utiliza apoi etichete dinamice care examinează parametrii șirului de interogare pentru a determina ce conținut să fie afișat utilizatorului.
{% 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 %}
Conectare în pagină cu un ID
Ca regulă generală, cel mai bine este să plasați elementul <devsite-nav-buttons> în partea de sus a paginii, deoarece făcând clic pe oricare dintre butoanele acestuia, utilizatorii vor ajunge la o nouă adresă URL și reîncarcă pagina. Dacă utilizați elementul în mijlocul unei pagini și/sau doriți ca locația elementului pe pagină să fie marcabilă, ar trebui să specificați un id unic pe element, care va adăuga o ancoră numită la adresa URL și va face ca pagina să deruleze la locația elementului când se încarcă pagina.
<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>
Opțiuni pentru parametri URL
În mod implicit, după ce un utilizator face clic pe unul dintre butoane, valoarea butonului este salvată în localStorage. Valoarea selectată este adăugată automat în bara de adrese ca parametru URL pe alte pagini cu elemente <devsite-nav-buttons> care utilizează același name și câmpuri value .
Eliminați parametrul URL pentru butonul implicit
Pentru a anula comportamentul implicit și pentru a elimina parametrul URL atunci când se face clic pe butonul default , adăugați param="reset" la element:
<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>
Afișați întotdeauna un parametru URL pentru butonul implicit
Când un utilizator vizitează o pagină cu un element <devsite-nav-buttons> pentru prima dată, butonul default este evidențiat și nu există nicio modificare a barei de adrese până când se face clic pe un buton.
Pentru a actualiza bara de adrese cu parametrul URL pentru butonul default și pentru a vă asigura că există întotdeauna un parametru URL în paginile cu un element <devsite-nav-buttons> , adăugați param="always" la element:
<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>
Stilul nasturii
În mod implicit, butoanele din elementul <devsite-nav-buttons> au stil „chip”. Pentru a crește sau a reduce impactul vizual al butoanelor, puteți adăuga un atribut type cu o valoare de filled sau text , care va stila fiecare element button .
Stilul butoanelor cu 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>
Stilul butoanelor cu 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>