Vlastní prvek <devsite-nav-buttons> umožňuje skupině tlačítek znovu načíst aktuální stránku s jiným parametrem querystring.
Demo
Java sample code
Používání
Chcete-li použít, vytvořte prvek <devsite-nav-buttons> s atributem name a umístěte do něj více prvků button s různými atributy value . Pro každou skupinu tlačítek vyberte jedno jako výchozí přidáním default atributu 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 souboru Markdown ( .md ) se ujistěte, že je vlastní prvek zabalen do standardního prvku HTML, jako je section , div nebo 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>
Poté můžete použít dynamické značky , které prozkoumají parametry řetězce dotazu a určí, který obsah se má uživateli zobrazit.
{% 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 %}
Propojení na stránce pomocí ID
Obecným pravidlem je, že je nejlepší umístit prvek <devsite-nav-buttons> do horní části stránky, protože kliknutím na libovolné z jeho tlačítek se uživatelé přesunou na novou adresu URL a stránka se znovu načte. Pokud prvek používáte uprostřed stránky a/nebo chcete, aby umístění prvku na stránce bylo možné označit jako záložku, měli byste pro prvek zadat jedinečné id , které k adrese URL připojí pojmenovanou kotvu a stránku posouvá. na umístění prvku při načítání 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 parametru URL
Ve výchozím nastavení se po klepnutí uživatele na jedno z tlačítek hodnota tlačítka uloží do localStorage. Vybraná hodnota se automaticky přidá do adresního řádku jako parametr adresy URL na jiných stránkách s prvky <devsite-nav-buttons> , které používají stejná pole name a value .
Odeberte parametr adresy URL pro výchozí tlačítko
Chcete-li přepsat výchozí chování a odstranit parametr adresy URL po kliknutí na default tlačítko, přidejte 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 zobrazit parametr adresy URL pro výchozí tlačítko
Když uživatel poprvé navštíví stránku s prvkem <devsite-nav-buttons> , default tlačítko se zvýrazní a na adresním řádku se nic nezmění, dokud neklikne na tlačítko.
Chcete-li, aby se adresní řádek aktualizoval pomocí parametru URL pro default tlačítko a zajistili, že na stránkách s prvkem <devsite-nav-buttons> bude vždy parametr adresy URL, přidejte 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>
Styl tlačítka
Ve výchozím nastavení mají tlačítka v prvku <devsite-nav-buttons> styl „čip“. Chcete-li zvýšit nebo snížit vizuální dopad tlačítek, můžete přidat atribut type s hodnotou filled nebo text , který nastaví styl každého prvku button .
Styl tlačítka 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>
Styl tlačítka 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>