Widgets: Navigationsschaltflächen

Mit dem benutzerdefinierten Element <devsite-nav-buttons> kann eine Gruppe von Schaltflächen neu geladen werden die aktuelle Seite mit einem anderen querystring-Parameter.

Demo

Java sample code

Nutzung

Erstellen Sie dazu ein <devsite-nav-buttons>-Element mit einem name-Attribut und platziere mehrere button-Elemente mit unterschiedlichen value-Attributen darin. Wähle für jede Gruppe von Schaltflächen eine als Standardschaltfläche aus, indem du eine default hinzufügst dem Element hinzu.

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

Achten Sie darauf, dass das benutzerdefinierte Element in einer Markdown-Datei (.md) von einem Standard-HTML-Element wie section, div oder 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>

Sie können dann dynamische Tags die die Abfragestringparameter untersuchen, um zu bestimmen, welcher Inhalt angezeigt werden soll. für den Nutzer.

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

In-Page-Verknüpfung mit einer ID

In der Regel ist es am besten, das <devsite-nav-buttons>-Element in der Nähe von oben auf der Seite, da der Nutzer durch Klicken auf eine der Schaltflächen zu einer neuen URL und aktualisiert die Seite. Wenn Sie das Element in der Mitte einer Seite verwenden und/oder die Position des Elements auf der Seite als Lesezeichen gespeichert werden soll, Geben Sie eine eindeutige id für das Element an, mit der ein benannter Anchor an den URL und sorgen Sie dafür, dass die Seite beim Laden der Seite zur Position des Elements scrollt.

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

Optionen für URL-Parameter

Wenn ein Nutzer auf eine der Schaltflächen klickt, wird der Wert der Schaltfläche standardmäßig gespeichert. zu localStorage. Der ausgewählte Wert wird der Adressleiste automatisch als um einen URL-Parameter auf anderen Seiten mit <devsite-nav-buttons>-Elementen, die name- und value-Felder.

URL-Parameter für die Standardschaltfläche entfernen

Um das Standardverhalten zu überschreiben und den URL-Parameter zu entfernen, wenn der Wenn auf die Schaltfläche default geklickt wird, fügen Sie dem Element param="reset" hinzu:

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

Immer einen URL-Parameter für die Standardschaltfläche anzeigen

Wenn ein Nutzer eine Seite mit einem <devsite-nav-buttons>-Element für das erste Mal besucht ist die Schaltfläche default markiert und die Adresse bleibt unverändert. bis eine Schaltfläche angeklickt wird.

So aktualisieren Sie die Adressleiste mit dem URL-Parameter für die Schaltfläche default: und stellen Sie sicher, dass auf Seiten mit <devsite-nav-buttons>-Element hinzufügen, fügen Sie dem Element param="always" hinzu:

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

Schaltflächenstil

Standardmäßig haben die Schaltflächen innerhalb des <devsite-nav-buttons>-Elements „Chip“. Stile. Um die visuelle Wirkung der Schaltflächen zu erhöhen oder zu verringern, können Sie ein type-Attribut mit dem Wert filled oder text, das jeweils button-Element.

Schaltflächenstile mit 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>

Schaltflächenstile mit 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>