Vlastný prvok <devsite-nav-buttons> umožňuje skupine tlačidiel znovu načítať aktuálnu stránku s iným parametrom querystring.
Demo
Java sample code
Použitie
Ak chcete použiť, vytvorte prvok <devsite-nav-buttons> s atribútom name a umiestnite do neho viacero prvkov button s rôznymi atribútmi value . Pre každú skupinu tlačidiel vyberte jedno ako predvolené pridaním default atribútu k prvku.
<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>
V súbore Markdown ( .md ) sa uistite, že je vlastný prvok obalený štandardným prvkom HTML, ako je napríklad section , div alebo 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>
Potom môžete použiť dynamické značky , ktoré preskúmajú parametre reťazca dotazu, aby určili, ktorý obsah sa má používateľovi zobraziť.
{% 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 %}
Prepojenie na stránke s ID
Vo všeobecnosti je najlepšie umiestniť prvok <devsite-nav-buttons> do hornej časti stránky, pretože kliknutím na ľubovoľné z jeho tlačidiel sa používatelia dostanú na novú adresu URL a stránka sa znova načíta. Ak používate prvok v strede stránky a/alebo chcete, aby umiestnenie prvku na stránke bolo možné označiť ako záložku, mali by ste zadať jedinečné id prvku, ktoré k URL pripojí pomenovanú kotvu a umožní rolovanie stránky. na umiestnenie prvku pri načítaní stránky.
<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>
možnosti parametra adresy URL
V predvolenom nastavení, keď používateľ klikne na jedno z tlačidiel, hodnota tlačidla sa uloží do localStorage. Vybraná hodnota sa automaticky pridá do panela s adresou ako parameter adresy URL na iných stránkach s prvkami <devsite-nav-buttons> , ktoré používajú rovnaké polia name a value .
Odstráňte parameter adresy URL pre predvolené tlačidlo
Ak chcete prepísať predvolené správanie a odstrániť parameter adresy URL po kliknutí na default tlačidlo, pridajte do prvku param="reset" :
<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>
Vždy zobraziť parameter adresy URL pre predvolené tlačidlo
Keď používateľ prvýkrát navštívi stránku s prvkom <devsite-nav-buttons> , default tlačidlo sa zvýrazní a panel s adresou sa nezmení, kým neklikne na tlačidlo.
Ak chcete, aby sa panel s adresou aktualizoval pomocou parametra adresy URL pre default tlačidlo a aby sa na stránkach s prvkom <devsite-nav-buttons> vždy nachádzal parameter adresy URL, pridajte do prvku param="always" :
<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>
Styling gombíkov
Tlačidlá v rámci prvku <devsite-nav-buttons> majú štandardne „čipový“ štýl. Ak chcete zvýšiť alebo znížiť vizuálny vplyv tlačidiel, môžete pridať atribút type s hodnotou filled alebo text , ktorý nastaví štýl každého prvku button .
Štýl tlačidla s 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>
Štýl tlačidla s 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>