Det tilpassede elementet <devsite-nav-buttons>
lar en gruppe knapper laste inn gjeldende side på nytt med en annen spørrestrengparameter.
Demo
Java sample code
Bruk
For å bruke, lag et <devsite-nav-buttons>
-element med et name
og plasser flere button
med forskjellige value
i det. For hver gruppe knapper velger du en som standard ved å legge til et 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
) må du sørge for at det tilpassede elementet er pakket med et standard HTML-element, for eksempel 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 deretter bruke dynamiske tagger som undersøker søkestrengparametrene for å bestemme hvilket innhold som skal vises til brukeren.
{% 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 %}
Linking på siden med en ID
Som en generell regel er det best å plassere <devsite-nav-buttons>
-elementet nær toppen av siden siden et klikk på en av knappene tar brukere til en ny URL og laster inn siden på nytt. Hvis du bruker elementet midt på en side og/eller vil at elementets plassering på siden skal kunne bokmerkes, bør du spesifisere en unik id
på elementet, som vil legge til et navngitt anker til URL-en og få siden til å rulle til elementets plassering når siden lastes inn.
<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>
Alternativer for URL-parametere
Som standard, etter at en bruker klikker på en av knappene, lagres knappens verdi i localStorage. Den valgte verdien legges automatisk til adressefeltet som en URL-parameter på andre sider med <devsite-nav-buttons>
-elementer som bruker samme name
og value
.
Fjern URL-parameteren for standardknappen
For å overstyre standardoppførselen og fjerne URL-parameteren når default
klikkes, legg til 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 alltid en URL-parameter for standardknappen
Når en bruker besøker en side med et <devsite-nav-buttons>
-element for første gang, utheves default
og det er ingen endring i adressefeltet før en knapp klikkes.
For å få adressefeltet til å oppdatere med URL-parameteren for default
, og sikre at det alltid er en URL-parameter på sider med et <devsite-nav-buttons>
-element, legg til 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>
Knappstyling
Som standard har knappene i <devsite-nav-buttons>
-elementet "chip"-stil. For å øke eller redusere den visuelle effekten av knappene, kan du legge til et type
med verdien filled
eller text
, som vil style hvert button
.
Knappestil 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>
Knappestil 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>