El elemento personalizado <devsite-nav-buttons> permite que se vuelva a cargar un grupo de botones
la página actual con un parámetro de cadena de consulta diferente.
Demostración
Java sample code
Uso
Para usarlo, crea un elemento <devsite-nav-buttons> con un atributo name y
coloca varios elementos button con diferentes atributos value dentro de ellos.
Para cada grupo de botones, selecciona uno como predeterminado agregando una default
al 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>
En un archivo de Markdown (.md), asegúrate de que el elemento personalizado esté unido a un
elemento HTML estándar, como 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>
Luego, puedes usar etiquetas dinámicas que examinan los parámetros de la cadena de consulta para determinar qué contenido mostrar para el usuario.
{% 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 %}
Vinculación in-page con un ID
Como regla general, es mejor colocar el elemento <devsite-nav-buttons> cerca de
la parte superior de la página, ya que cuando los usuarios hacen clic en cualquiera de los botones, se los dirige a una nueva URL
y vuelve a cargar la página. Si usas el elemento en el medio de una página
o quieres que la ubicación del elemento en la página se pueda agregar a favoritos, debes
especificar un id único en el elemento, que agregará un ancla con nombre al
URL y hacen que la página se desplace hasta la ubicación del elemento cuando se cargue.
<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>
Opciones de parámetros de URL
De forma predeterminada, después de que un usuario hace clic en uno de los botones, se guarda el valor del botón.
a localStorage. El valor seleccionado se agrega automáticamente a la barra de direcciones como
un parámetro de URL en otras páginas con elementos <devsite-nav-buttons> que usan
los mismos campos name y value.
Quita el parámetro de URL del botón predeterminado
Para anular el comportamiento predeterminado y quitar el parámetro de URL cuando
Si se hace clic en el botón default, agrega param="reset" al 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>
Mostrar siempre un parámetro de URL para el botón predeterminado
Cuando un usuario visita una página con un elemento <devsite-nav-buttons> por primera vez
hora, el botón default se destaca y no se produce ningún cambio en la dirección
hasta que se hace clic en un botón.
Para que la barra de direcciones se actualice con el parámetro de URL del botón default, haz lo siguiente:
y asegúrate de que siempre haya un parámetro de URL en las páginas con una
<devsite-nav-buttons>, agrega param="always" al 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>
Estilos de botones
De forma predeterminada, los botones dentro del elemento <devsite-nav-buttons> tienen "chip"
estilo. Para aumentar o disminuir el impacto visual de los botones, puedes agregar
un atributo type con un valor de filled o text, que aplicará un estilo a cada uno
button.
Cómo aplicar estilo al botón 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>
Cómo aplicar estilo al botón 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>