Met het aangepaste element <devsite-nav-buttons> kan een groep knoppen de huidige pagina opnieuw laden met een andere querystringparameter.
Demo
Java sample code
Gebruik
Om dit te gebruiken, maakt u een <devsite-nav-buttons> -element met een name attribuut en plaatst u meerdere button met verschillende value attributen daarin. Selecteer voor elke groep knoppen één standaard door een default aan het element toe te voegen.
<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>
Zorg er in een Markdown-bestand ( .md ) voor dat het aangepaste element is omhuld met een standaard HTML-element, zoals een section , div of 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>
Vervolgens kunt u dynamische tags gebruiken die de parameters van de queryreeks onderzoeken om te bepalen welke inhoud aan de gebruiker moet worden weergegeven.
{% 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-page koppeling met een ID
Als algemene regel geldt dat het het beste is om het element <devsite-nav-buttons> bovenaan de pagina te plaatsen, aangezien gebruikers door op een van de knoppen te klikken naar een nieuwe URL worden geleid en de pagina opnieuw wordt geladen. Als u het element in het midden van een pagina gebruikt en/of wilt dat de locatie van het element op de pagina als bladwijzer kan worden gemarkeerd, moet u een unieke id voor het element opgeven, die een benoemd anker aan de URL toevoegt en de pagina laat scrollen naar de locatie van het element wanneer de pagina wordt geladen.
<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>
URL-parameteropties
Nadat een gebruiker op een van de knoppen heeft geklikt, wordt de waarde van de knop standaard opgeslagen in localStorage. De geselecteerde waarde wordt automatisch toegevoegd aan de adresbalk als URL-parameter op andere pagina's met <devsite-nav-buttons> -elementen die dezelfde name en value gebruiken.
Verwijder de URL-parameter voor de standaardknop
Om het standaardgedrag te overschrijven en de URL-parameter te verwijderen wanneer op de default wordt geklikt, voegt u param="reset" toe aan het 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>
Geef altijd een URL-parameter weer voor de standaardknop
Wanneer een gebruiker voor de eerste keer een pagina met een <devsite-nav-buttons> -element bezoekt, wordt de default gemarkeerd en verandert er niets aan de adresbalk totdat er op een knop wordt geklikt.
Om de adresbalk te updaten met de URL-parameter voor de default , en ervoor te zorgen dat er altijd een URL-parameter is op pagina's met een <devsite-nav-buttons> -element, voegt u param="always" toe aan het 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>
Knopenstijl
Standaard hebben de knoppen binnen het <devsite-nav-buttons> -element een "chip"-stijl. Om de visuele impact van de knoppen te vergroten of verkleinen, kunt u een type attribuut toevoegen met de waarde filled of text , waarmee elk button wordt opgemaakt.
Knopstijl met 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>
Knopstijl met 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>