Прилагођени елемент <devsite-nav-buttons> омогућава групи дугмади да поново учита тренутну страницу са другим параметром стринга упита.
Демо
Java sample code
Употреба
Да бисте га користили, направите елемент <devsite-nav-buttons> са атрибутом name и поставите више елемената button са различитим атрибутима value унутар њега. За сваку групу дугмади, изаберите једно као подразумевано додавањем default атрибута елементу.
<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>
У Маркдовн ( .md ) датотеци, уверите се да је прилагођени елемент омотан стандардним ХТМЛ елементом, као што је section , div или 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>
Затим можете да користите динамичке ознаке које испитују параметре стринга упита да бисте одредили који садржај желите да прикажете кориснику.
{% 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 %}Повезивање унутар странице са ИД-ом
Као опште правило, најбоље је поставити елемент <devsite-nav-buttons> > близу врха странице пошто клик на било које од његових дугмади води кориснике на нову УРЛ адресу и поново учитава страницу. Ако користите елемент у средини странице и/или желите да се локација елемента на страници може обележити, требало би да наведете јединствени id елемента, који ће додати именовано сидро на УРЛ и учинити да се страница помера на локацију елемента када се страница учита.
<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>
Опције параметара УРЛ-а
Подразумевано, након што корисник кликне на једно од дугмади, вредност дугмета се чува у лоцалСтораге. Изабрана вредност се аутоматски додаје у адресну траку као параметар УРЛ-а на другим страницама са елементима <devsite-nav-buttons> > који користе иста поља name и value .
Уклоните параметар УРЛ-а за подразумевано дугме
Да бисте заменили подразумевано понашање и уклонили параметар УРЛ-а када се кликне на default дугме, додајте 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>
Увек прикажи УРЛ параметар за подразумевано дугме
Када корисник први пут посети страницу са елементом <devsite-nav-buttons> , default дугме је истакнуто и нема промене у адресној траци док се не кликне на дугме.
Да бисте ажурирали траку за адресу параметром УРЛ адресе за default дугме и осигурали да увек постоји параметар УРЛ-а на страницама са елементом <devsite-nav-buttons> , додајте 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>
Стилирање дугмади
Подразумевано, дугмад унутар елемента <devsite-nav-buttons> > имају „чип“ стил. Да бисте повећали или смањили визуелни утицај дугмади, можете додати атрибут type са вредношћу filled или text , који ће стилизовати сваки елемент button .
Стил дугмета са 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>
Стил дугмета са 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>