Спеціальний елемент <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>
мають стиль "chip". Щоб збільшити або зменшити візуальний вплив кнопок, ви можете додати атрибут 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>