このページは Cloud Translation API によって翻訳されました。

ウィジェット: ナビゲーションボタン

カスタム要素 <devsite-nav-buttons> を使用すると、ボタンのグループを再読み込みできます。現在のページを別のクエリ文字列パラメータで呼び出します。

デモ

Java sample code

用途

使用するには、<devsite-nav-buttons> 要素を作成して name 属性を指定します。異なる 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>

マークダウン（.md）ファイルでは、カスタム要素が（section、div、p など）の標準 HTML 要素を使用します。

<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> 要素は次の場所に配置することをおすすめします。ユーザーがそのボタンをクリックすると新しい URL が表示されるため、ページ上部にページが再読み込みされます。ページの途中で要素を使用している場合ページ上の要素の位置をブックマーク可能にする場合は、要素に一意の id を指定します。これにより、名前付きアンカーが URL を表示して、そのページが読み込まれるときに該当要素の位置にページがスクロールされるようにします。

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

URL パラメータのオプション

デフォルトでは、ユーザーがいずれかのボタンをクリックすると、ボタンの値が保存されます。アップロードします。選択した値がアドレスバーに自動的に追加されます <devsite-nav-buttons> 要素を使用している他のページの URL パラメータ同じ name フィールドと value フィールドに対して行われます。

デフォルトのボタンの URL パラメータを削除する

デフォルトの動作を無効にして、URL パラメータを削除するには、 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>

デフォルトのボタンの URL パラメータを常に表示する

<devsite-nav-buttons> 要素を含むページにユーザーが初めてアクセスしたとき default ボタンが強調表示され、アドレスに変更はありません。クリックするまで表示されません。

default ボタンの URL パラメータでアドレスバーを更新するには: また、URL が記載されているページには必ず URL パラメータが <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" を使用したボタンのスタイル設定 :

<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" を使用したボタンのスタイル設定 :

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

ウィジェット: ナビゲーション ボタン

デモ

用途