このページでは、スポットライトに関連するディレクティブの一覧を示します。
スポットライト ポインタ
<walkthrough-spotlight-pointer spotlightId="SPOTLIGHT_ID">LINK_TEXT</walkthrough-spotlight-pointer>
<walkthrough-spotlight-pointer cssSelector="CSS_SELECTOR">LINK_TEXT</walkthrough-spotlight-pointer>
クリックすると Google Cloud コンソールで指定された UI 要素をハイライト表示するリンクを作成します。
次のいずれかの方法で、ページの要素にスポットライトを当てることができます。
- スポットライト/ インストルメンテーション ID
spotlightIdパラメータを使用して、DOM 要素のinstrumentation-idまたはspotlight-idプロパティ値を指定して要素を選択します。- CSS セレクタ
- スポットライトまたはインストルメンテーション ID のない要素の場合、CSS セレクタで
cssSelectorパラメータを使用して要素を選択します。
これらのパラメータのうち、必須は 1 つのみです。両方が指定されている場合、spotlightId が使用されます。
区切り文字にカンマを使用して複数の要素を選択できます。一致するすべての要素がハイライト表示され、最初の要素がフォーカスされてスクロール表示されます。
Cloud Shell エディタのスポットライトについては、Cloud Shell エディタのスポットライトをご覧ください。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
spotlightId
|
定価 | スポットライト/インストルメンテーション ID。カンマ区切りで指定します。 |
cssSelector |
リスト | スポットライトにする CSS セレクタ。カンマ区切りで指定します。 |
title
|
文字列 | （省略可）ユーザーがスポットライト リンクの上にマウスカーソルを移動すると表示されるツールチップ。 |
次のスポットライト/インストゥルメンテーション ID のリストを使用してください。
| スポットライト/インストルメンテーション ID | ハイライト表示された要素 |
|---|---|
console-nav-menu |
コンソールのナビゲーション メニュー。 |
devshell-activate-button |
Cloud Shell を開くボタン。 |