微件：导航按钮

<devsite-nav-buttons> 自定义元素允许重新加载一组按钮 其他查询字符串参数当前网页。

演示

<ph type="x-smartling-placeholder"></ph> 
Java sample code

用法

若要使用，请创建一个具有 name 属性的 <devsite-nav-buttons> 元素，并 在其中放置多个具有不同 value 属性的 button 元素。 对于每组按钮，通过添加 default 选择一个按钮作为默认按钮 属性。

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

在 Markdown (.md) 文件中，确保自定义元素封装有 标准 HTML 元素，例如 section、div 或 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>

然后，您可以使用 动态代码 检查查询字符串参数以确定要显示的内容 。

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

使用 ID 的页内链接

一般来说，最好将 <devsite-nav-buttons> 元素放置在 因为点击其中的任何按钮都会转到新网址 并重新加载页面如果您在网页中间使用该元素 并且/或者希望该元素在网页上的位置可供书签使用，则应 为元素指定唯一的 id，这会在 网址，并在网页加载时让网页滚动到相应元素的位置。

<ph type="x-smartling-placeholder"></ph> 
<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>

网址参数选项

默认情况下，在用户点击其中一个按钮后，系统会保存该按钮的值 本地存储的数据。所选值会作为 其他包含 <devsite-nav-buttons> 元素（使用 相同的 name 和 value 字段。

移除默认按钮的网址参数

要覆盖默认行为，并在 点击 default 按钮后，将 param="reset" 添加到元素中：

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

始终为默认按钮显示网址参数

当用户访问第一个包含 <devsite-nav-buttons> 元素的网页时 突出显示 default 按钮，且地址没有变化 直至点击某个按钮为止。

若要使用 default 按钮的网址参数更新地址栏，请执行以下操作： 并确保包含 <devsite-nav-buttons> 元素，向该元素添加 param="always"：

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

按钮样式

默认情况下，<devsite-nav-buttons> 元素中的按钮具有“条状标签” 样式。要增加或减小按钮的视觉效果，您可以在 值为 filled 或 text 的 type 属性，该属性将设置每个属性的样式 button 元素。

使用 type="filled" 设置按钮样式：

<ph type="x-smartling-placeholder"></ph> 
<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>

使用 type="text" 设置按钮样式：

<ph type="x-smartling-placeholder"></ph> 
<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>