O elemento personalizado <devsite-nav-buttons> permite que um grupo de botões seja recarregado
a página atual com um parâmetro de string de consulta diferente.
Demonstração
Java sample code
Uso
Para usar, crie um elemento <devsite-nav-buttons> com um atributo name e
coloque vários elementos button com diferentes atributos value dentro deles.
Para cada grupo de botões, selecione um como padrão adicionando um default.
ao 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>
Em um arquivo Markdown (.md), verifique se o elemento personalizado está encapsulado com um
elemento HTML padrão, como section, div ou 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>
Em seguida, você pode usar tags dinâmicas que examinam os parâmetros da string de consulta para determinar qual conteúdo exibir para o usuário.
{% 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 %}
Vinculação na página com um ID
Como regra geral, é melhor colocar o elemento <devsite-nav-buttons> perto de
na parte superior da página, pois ao clicar em qualquer um de seus botões os usuários são levados a um novo URL
e recarrega a página. Se você estiver usando o elemento no meio de uma página
e/ou quiser que a localização do elemento na página possa ser adicionada aos favoritos, você deve
especificar um id exclusivo no elemento, que anexará uma âncora nomeada ao
e faça a página rolar até o local do elemento quando ela for carregada.
<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>
Opções de parâmetro de URL
Por padrão, depois que um usuário clica em um dos botões, o valor do botão é salvo.
em localStorage. O valor selecionado é adicionado automaticamente à barra de endereço como
um parâmetro de URL em outras páginas com elementos <devsite-nav-buttons> que usam
os mesmos campos name e value.
Remova o parâmetro de URL do botão padrão
Para substituir o comportamento padrão e remover o parâmetro de URL quando o
Clique no botão default, adicione param="reset" ao 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>
Sempre mostrar um parâmetro de URL para o botão padrão
Quando um usuário visita uma página com um elemento <devsite-nav-buttons> pela primeira vez
horário, o botão default é destacado e não há alteração no endereço
até que um botão seja clicado.
Para fazer a barra de endereço ser atualizada com o parâmetro de URL do botão default, faça o seguinte:
e garantir que sempre haja um parâmetro de URL nas páginas com um
<devsite-nav-buttons>, adicione param="always" a ele:
<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>
Estilo do botão
Por padrão, os botões no elemento <devsite-nav-buttons> têm "chip".
estilização. Para aumentar ou diminuir o impacto visual dos botões, adicione
um atributo type com um valor de filled ou text, que vai definir o estilo de cada
button.
Estilo do botão com 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>
Estilo do botão com 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>