Пользовательский элемент <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 %}
Внутристраничная ссылка с идентификатором
Как правило, лучше всего размещать элемент <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>