Widżety: przyciski nawigacyjne

Element niestandardowy <devsite-nav-buttons> umożliwia ponowne załadowanie grupy przycisków. bieżącej stronie z innym parametrem ciągu zapytania.

Prezentacja

Java sample code

Wykorzystanie

Aby go użyć, utwórz element <devsite-nav-buttons> z atrybutem name oraz możesz umieścić w nich wiele elementów button z różnymi atrybutami value. W przypadku każdej grupy przycisków wybierz 1 z nich jako domyślny, dodając default do elementu.

<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>

W pliku Markdown (.md) element niestandardowy powinien być opakowany znakiem standardowy element HTML, taki jak section, div lub 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>

Następnie możesz użyć tagi dynamiczne analizując parametry ciągu zapytania, aby określić, jaką zawartość wyświetlić po stronie użytkownika.

{% 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 %}

Link na stronie za pomocą identyfikatora

Zasadniczo najlepiej jest umieścić element <devsite-nav-buttons> w pobliżu u góry strony, ponieważ kliknięcie dowolnego przycisku powoduje przejście użytkownika pod nowy adres URL i załaduje ponownie stronę. Jeśli używasz elementu znajdującego się w środku strony lub chcesz, aby lokalizację elementu na stronie można było dodać do zakładek, unikalny tag id w elemencie, który spowoduje dołączenie nazwanej kotwicy do adresu URL i sprawiają, że po załadowaniu strony strona przewija się do lokalizacji elementu.

<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>

Opcje parametru adresu URL

Domyślnie, gdy użytkownik kliknie jeden z przycisków, jego wartość jest zapisywana. do localStorage. Wybrana wartość jest automatycznie dodawana do paska adresu jako parametru adresu URL na innych stronach z elementami <devsite-nav-buttons>, które używają parametru tych samych pól name i value.

Usuwanie parametru adresu URL przycisku domyślnego

Aby zastąpić domyślne działanie i usunąć parametr adresu URL, gdy parametr Kliknięto przycisk default. Dodaj param="reset" do elementu:

<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>

Zawsze wyświetlaj parametr adresu URL przycisku domyślnego

Gdy użytkownik w pierwszej kolejności odwiedza stronę z elementem <devsite-nav-buttons> czas, przycisk default jest zaznaczony, a adres pozostaje bez zmian aż użytkownik kliknie przycisk.

Aby zaktualizować pasek adresu za pomocą parametru adresu URL przycisku default: i upewnij się, że na stronach z tagami <devsite-nav-buttons>, dodaj do niego 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>

Styl przycisku

Domyślnie przyciski w elemencie <devsite-nav-buttons> mają element „chip” stylu. Aby zwiększyć lub zmniejszyć oddziaływanie przycisków, możesz dodać atrybut type o wartości filled lub text, który dopasuje styl do każdego button.

Styl przycisku z atrybutem 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>

Styl przycisku z atrybutem 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>