L'element personalitzat <devsite-nav-buttons> permet que un grup de botons torni a carregar la pàgina actual amb un paràmetre de cadena de consulta diferent.
Demostració
Java sample code
Ús
Per utilitzar-lo, creeu un element <devsite-nav-buttons> amb un atribut name i col·loqueu diversos elements button amb diferents atributs value . Per a cada grup de botons, seleccioneu-ne un com a predeterminat afegint un atribut default a l'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>
En un fitxer Markdown ( .md ), assegureu-vos que l'element personalitzat estigui embolicat amb un element HTML estàndard, com ara una section , div o 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>
A continuació, podeu utilitzar etiquetes dinàmiques que examinen els paràmetres de la cadena de consulta per determinar quin contingut mostrar a l'usuari.
{% 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 %}
Enllaç a la pàgina amb un identificador
Com a regla general, el millor és col·locar l'element <devsite-nav-buttons> a prop de la part superior de la pàgina, ja que fer clic a qualsevol dels seus botons porta els usuaris a un URL nou i torna a carregar la pàgina. Si utilitzeu l'element al mig d'una pàgina i/o voleu que la ubicació de l'element a la pàgina sigui marcable, hauríeu d'especificar un id únic a l'element, que afegirà una àncora amb nom a l'URL i farà que la pàgina es desplaci. a la ubicació de l'element quan es carrega la pàgina.
<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>
Opcions de paràmetres d'URL
De manera predeterminada, després que un usuari faci clic en un dels botons, el valor del botó es desa a localStorage. El valor seleccionat s'afegeix automàticament a la barra d'adreces com a paràmetre d'URL en altres pàgines amb elements <devsite-nav-buttons> que utilitzen els mateixos camps name i value .
Elimineu el paràmetre URL del botó predeterminat
Per anul·lar el comportament predeterminat i eliminar el paràmetre d'URL quan es fa clic al botó default , afegiu param="reset" a l'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>
Mostra sempre un paràmetre d'URL per al botó predeterminat
Quan un usuari visita una pàgina amb un element <devsite-nav-buttons> per primera vegada, el botó default es ressalta i no hi ha cap canvi a la barra d'adreces fins que no es fa clic en un botó.
Per actualitzar la barra d'adreces amb el paràmetre d'URL del botó default i assegurar-vos que sempre hi ha un paràmetre d'URL a les pàgines amb un element <devsite-nav-buttons> , afegiu param="always" a l'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>
Estil de botons
Per defecte, els botons de l'element <devsite-nav-buttons> tenen un estil "xip". Per augmentar o disminuir l'impacte visual dels botons, podeu afegir un atribut type amb un valor de filled o text , que donarà estil a cada element button .
Estil de botons amb 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>
Estil de botons amb 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>