스포트라이트

다음 페이지에는 스포트라이트와 관련된 지시문이 나와 있습니다.

스포트라이트 포인터

<walkthrough-spotlight-pointer spotlightId="SPOTLIGHT_ID">LINK_TEXT</walkthrough-spotlight-pointer>
<walkthrough-spotlight-pointer cssSelector="CSS_SELECTOR">LINK_TEXT</walkthrough-spotlight-pointer>

클릭하면 Cloud Console에서 지정된 UI 요소를 강조표시하는 링크를 만듭니다.

다음 두 가지 방법 중 하나로 페이지의 요소를 스포트라이트로 강조할 수 있습니다.

스포트라이트/도구 작동 ID
spotlightId 매개변수를 사용하여 DOM 요소의 instrumentation-id 또는spotlight-id 속성 값을 지정하여 요소를 선택합니다.
CSS 선택기
스포트라이트 또는 도구 작동 ID가 없는 요소의 경우 CSS 선택기와 함께 cssSelector 매개변수를 사용하여 요소를 선택합니다.

이 매개변수 중 하나만 필요합니다. 두 가지를 모두 제공하면 spotlightId가 사용됩니다.

쉼표를 구분 기호로 사용하여 여러 요소를 선택할 수 있습니다. 첫 번째 요소에 포커스가 지정된 상태에서 일치하는 모든 요소가 강조표시되고 해당 요소가 표시되도록 스크롤합니다.

Cloud Shell 편집기의 스포트라이트는 Cloud Shell 편집기 스포트라이트를 참조하세요.

매개변수

매개변수 유형 설명
spotlightId 목록 스포트라이트로 강조할 스포트라이트/도구 작동 ID로 쉼표로 구분됩니다.
cssSelector 목록 스포트라이트로 강조할 CSS 선택기로 쉼표로 구분됩니다.
title 문자열 (선택사항) 사용자가 스포트라이트 링크 위로 마우스 커서를 가져가면 표시되는 팁입니다.

사용할 수 있는 스포트라이트/도구 작동 ID 목록은 다음과 같습니다.

스포트라이트/도구 작동 ID 강조표시된 요소
console-nav-menu 콘솔 탐색 메뉴입니다.
devshell-activate-button Cloud Shell을 여는 버튼입니다.