Персонализираният елемент <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>
Във файл Markdown ( .md ) се уверете, че потребителският елемент е обвит със стандартен HTML елемент, като 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 %}
Връзка в страницата с ID
Като общо правило е най-добре да поставите елемента <devsite-nav-buttons> близо до горната част на страницата, тъй като щракването върху който и да е от неговите бутони отвежда потребителите до нов URL адрес и презарежда страницата. Ако използвате елемента в средата на страница и/или искате местоположението на елемента на страницата да може да се маркира с отметки, трябва да посочите уникален id на елемента, който ще добави наименувана котва към URL адреса и ще накара страницата да се превърта към местоположението на елемента, когато страницата се зареди.
<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 параметри
По подразбиране, след като потребител щракне върху един от бутоните, стойността на бутона се записва в localStorage. Избраната стойност автоматично се добавя към адресната лента като URL параметър на други страници с <devsite-nav-buttons> елементи, които използват същото name и полета value .
Премахнете URL параметъра за бутона по подразбиране
За да замените поведението по подразбиране и да премахнете URL параметъра, когато се щракне върху бутона 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>
Винаги показвайте URL параметър за бутона по подразбиране
Когато потребител посети страница с елемент <devsite-nav-buttons> за първи път, бутонът default се маркира и няма промяна в адресната лента, докато не се щракне върху бутон.
За да актуализирате адресната лента с URL параметъра за бутона default и да гарантирате, че винаги има URL параметър на страници с елемент <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>