Det anpassade elementet <devsite-nav-buttons> tillåter en grupp knappar att ladda om den aktuella sidan med en annan frågesträngsparameter.
Demo
Java sample code
Användande
För att använda, skapa ett <devsite-nav-buttons> -element med ett name och placera flera button med olika value inom sig. För varje grupp av knappar, välj en som standard genom att lägga till ett default till 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 ) kontrollerar du att det anpassade elementet är lindat med ett standard-HTML-element, till exempel 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 sedan använda dynamiska taggar som undersöker frågesträngsparametrarna för att avgöra vilket innehåll som ska visas för användaren.
{% 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 %}Länkning på sidan med ett ID
Som en allmän regel är det bäst att placera elementet <devsite-nav-buttons> nära toppen av sidan eftersom ett klicka på någon av dess knappar tar användare till en ny URL och laddar om sidan. Om du använder elementet i mitten av en sida och/eller vill att elementets plats på sidan ska kunna bokmärkas, bör du ange ett unikt id på elementet, vilket kommer att lägga till ett namngivet ankare till URL:en och få sidan att rulla till elementets plats när sidan laddas.
<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>
Alternativ för URL-parameter
Som standard, efter att en användare klickat på en av knapparna, sparas knappens värde i localStorage. Det valda värdet läggs automatiskt till i adressfältet som en URL-parameter på andra sidor med <devsite-nav-buttons> -element som använder samma name och value .
Ta bort URL-parametern för standardknappen
För att åsidosätta standardbeteendet och ta bort URL-parametern när default klickas, lägg till param="reset" till 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>
Visa alltid en URL-parameter för standardknappen
När en användare besöker en sida med ett <devsite-nav-buttons> -element för första gången, markeras default och adressfältet ändras inte förrän en knapp klickas.
För att få adressfältet att uppdatera med URL-parametern för default och se till att det alltid finns en URL-parameter på sidor med ett <devsite-nav-buttons> -element, lägg till param="always" till 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 knapparna i <devsite-nav-buttons> -elementet "chip"-stil. För att öka eller minska den visuella effekten av knapparna kan du lägga till ett type med värdet filled eller text , som kommer att utforma varje button .
Knappstil 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>
Knappstil 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>