Det brugerdefinerede element <devsite-nav-buttons> tillader en gruppe knapper at genindlæse den aktuelle side med en anden forespørgselsstrengparameter.
Demo
Java sample code
Brug
For at bruge skal du oprette et <devsite-nav-buttons> -element med en name og placere flere button med forskellige value indeni. For hver gruppe af knapper skal du vælge en som standard ved at tilføje en default til elementet.
<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>
I en Markdown-fil ( .md ) skal du sørge for, at det brugerdefinerede element er pakket med et standard HTML-element, såsom en section , div eller 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>
Du kan derefter bruge dynamiske tags , der undersøger forespørgselsstrengparametrene for at bestemme, hvilket indhold der skal vises til brugeren.
{% 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 %}
In-side linking med et ID
Som en generel regel er det bedst at placere <devsite-nav-buttons> -elementet nær toppen af siden, da et klik på en af dets knapper fører brugerne til en ny URL og genindlæser siden. Hvis du bruger elementet midt på en side og/eller ønsker, at elementets placering på siden skal kunne bogmærkes, skal du angive et unikt id på elementet, som vil tilføje et navngivet anker til URL'en og få siden til at rulle til elementets placering, når siden indlæses.
<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>
Indstillinger for URL-parametre
Som standard, efter at en bruger har klikket på en af knapperne, gemmes knappens værdi i localStorage. Den valgte værdi tilføjes automatisk til adresselinjen som en URL-parameter på andre sider med <devsite-nav-buttons> -elementer, der bruger samme name og value .
Fjern URL-parameteren for standardknappen
For at tilsidesætte standardadfærden og fjerne URL-parameteren, når der klikkes på default , skal du tilføje param="reset" til elementet:
<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>
Vis altid en URL-parameter for standardknappen
Når en bruger besøger en side med et <devsite-nav-buttons> -element for første gang, fremhæves default , og der er ingen ændring i adresselinjen, før der klikkes på en knap.
For at få adresselinjen til at opdatere med URL-parameteren for default og sikre, at der altid er en URL-parameter på sider med et <devsite-nav-buttons> -element, skal du tilføje param="always" til elementet:
<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>
Knap styling
Som standard har knapperne i <devsite-nav-buttons> -elementet "chip"-stil. For at øge eller mindske den visuelle effekt af knapperne kan du tilføje en type med værdien filled eller text , som vil style hvert button .
Knapstyling med 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>
Knapstil med 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>