Віджети: навігаційні кнопки

Спеціальний елемент <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>