Widget: pulsanti di navigazione

L'elemento personalizzato <devsite-nav-buttons> consente di ricaricare un gruppo di pulsanti la pagina corrente con un diverso parametro querystring.

Demo

Java sample code

Utilizzo

Per usarlo, crea un elemento <devsite-nav-buttons> con un attributo name e posiziona più elementi button con attributi value diversi. Per ogni gruppo di pulsanti, selezionane uno come predefinito aggiungendo un default all'elemento.

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

In un file Markdown (.md), assicurati che l'elemento personalizzato sia aggregato con una elemento HTML standard, ad esempio section, div o 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>

Puoi quindi utilizzare tag dinamici che esaminano i parametri della stringa di query per determinare quali contenuti visualizzare all'utente.

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

Collegamento in-page con un ID

Come regola generale, è meglio posizionare l'elemento <devsite-nav-buttons> vicino nella parte superiore della pagina, poiché quando fanno clic su un pulsante, gli utenti vengono indirizzati a un nuovo URL e ricarica la pagina. Se utilizzi l'elemento al centro di una pagina e/o vuoi che la posizione dell'elemento sulla pagina sia selezionabile, devi specificare un id univoco sull'elemento, che aggiungerà un ancoraggio denominato al l'URL e fa scorrere la pagina fino alla posizione dell'elemento quando viene caricata.

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

Opzioni dei parametri URL

Per impostazione predefinita, quando un utente fa clic su uno dei pulsanti, il valore del pulsante viene salvato. a localStorage. Il valore selezionato viene aggiunto automaticamente alla barra degli indirizzi come un parametro URL su altre pagine con elementi <devsite-nav-buttons> che utilizzano gli stessi campi name e value.

Rimuovi il parametro URL per il pulsante predefinito

Per eseguire l'override del comportamento predefinito e rimuovere il parametro URL quando Hai fatto clic sul pulsante default. Aggiungi param="reset" all'elemento:

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

Visualizza sempre un parametro URL per il pulsante predefinito

Quando un utente visita per la prima volta una pagina con un elemento <devsite-nav-buttons> volta, il pulsante default è evidenziato e l'indirizzo non viene modificato barra finché non viene fatto clic su un pulsante.

Per aggiornare la barra degli indirizzi con il parametro URL per il pulsante default, e assicurati che ci sia sempre un parametro URL nelle pagine con un Elemento <devsite-nav-buttons>, aggiungi param="always" all'elemento:

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

Stile dei pulsanti

Per impostazione predefinita, i pulsanti all'interno dell'elemento <devsite-nav-buttons> hanno "chip" stili. Per aumentare o diminuire l'impatto visivo dei pulsanti, puoi aggiungere un attributo type con il valore filled o text, che applicherà lo stile a ogni Elemento button.

Stile dei pulsanti con 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>

Stile dei pulsanti con 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>