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>