Widgets: Nav-knapper

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>