이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

보기

보기는 사이드바 또는 패널에 나타날 수 있는 콘텐츠의 컨테이너입니다. 보기에는 트리 보기, 환영 보기 또는 웹뷰 보기가 포함될 수 있으며 보기 작업을 표시할 수도 있습니다. 보기는 사용자가 재정렬하거나 다른 보기 컨테이너로 이동할 수도 있습니다(예: 기본 사이드바에서 보조 사이드바로). 다른 확장이 동일한 보기 컨테이너에 기여할 수 있으므로 생성하는 보기의 수를 제한하십시오.

✔️ 권장 사항

  • 가능한 경우 기존 아이콘 사용
  • 언어 파일에 파일 아이콘 사용
  • 데이터 표시를 위해 트리 보기 사용
  • 모든 보기에 아이콘 추가(활동 표시줄 또는 보조 사이드바로 이동될 경우 - 둘 다 보기를 나타내기 위해 아이콘을 사용함)
  • 보기 수 최소화
  • 이름 길이 최소화
  • 사용자 정의 웹뷰 보기 사용 제한

❌ 권장하지 않음

  • 기존 기능 반복
  • 트리 항목을 단일 작업 항목으로 사용(예: 클릭 시 명령 실행)
  • 필요하지 않은 경우 사용자 정의 웹뷰 보기 사용
  • 편집기에서 웹뷰를 열기 위해 활동 표시줄 항목(보기 컨테이너) 사용

Views example

이 예제에서는 트리 보기를 사용하여 트리 보기 항목의 플랫 목록을 표시합니다.

보기 위치

보기는 파일 탐색기, 소스 제어(SCM) 및 디버그 보기 컨테이너와 같은 기존 보기 컨테이너에 배치될 수 있습니다. 활동 표시줄을 통해 사용자 정의 보기 컨테이너에 추가할 수도 있습니다. 또한 패널의 모든 보기 컨테이너에 보기를 추가할 수 있습니다. 보조 사이드바로 드래그할 수도 있습니다.

View locations

보기 컨테이너

보기 컨테이너는 이름에서 알 수 있듯이 보기가 렌더링되는 "부모" 컨테이너입니다. 확장은 활동 표시줄/기본 사이드바 또는 패널에 사용자 정의 보기 컨테이너를 기여할 수 있습니다. 사용자는 활동 표시줄에서 패널로 전체 보기 컨테이너를 드래그(또는 그 반대)할 수 있으며 개별 보기를 이동할 수도 있습니다.

Example of a View Container

이것은 활동 표시줄/기본 사이드바에 배치된 보기 컨테이너의 예입니다.

Example of a View Container in a Panel

이것은 패널에 배치된 보기 컨테이너의 예입니다.

트리 보기

트리 보기는 보기에서 콘텐츠를 표시하는 강력하고 유연한 형식입니다. 확장은 간단한 플랫 목록부터 깊게 중첩된 트리까지 모든 것을 추가할 수 있습니다.

  • 항목에 컨텍스트를 제공하기 위해 설명적인 레이블 사용(해당하는 경우)
  • 항목 유형을 구별하기 위해 제품 아이콘 사용(해당하는 경우)

❌ 권장하지 않음

  • 트리 보기 항목을 명령 실행 버튼으로 사용
  • 필요하지 않은 한 깊은 중첩을 피하십시오. 몇 단계의 폴더/항목은 대부분의 상황에서 좋은 균형입니다.
  • 항목에 세 개 이상의 작업 추가

Example of a Tree View

환영 보기

보기가 비어 있을 때 사용자에게 확장 사용 방법 또는 시작 방법을 안내하는 콘텐츠를 추가할 수 있습니다. 링크와 아이콘은 환영 보기에 지원됩니다.

✔️ 권장 사항

  • 필요한 경우에만 환영 보기 사용
  • 가능하면 버튼 대신 링크 사용
  • 주요 작업에만 버튼 사용
  • 링크 대상임을 나타내기 위해 명확한 링크 텍스트 사용
  • 콘텐츠 길이 제한
  • 환영 보기 수 제한
  • 보기의 버튼 수 제한

❌ 권장하지 않음

  • 필요하지 않은 경우 버튼 사용
  • 프로모션에 환영 보기 사용
  • 링크 텍스트로 일반적인 "더 읽기" 사용

Welcome Views

이 예제는 확장에 대한 하나의 주요 작업과 추가 문서 링크를 보여줍니다.

진행률 표시 보기

보기의 ID를 참조하여 보기에서 진행률을 표시할 수도 있습니다.

View with progress

보기 작업

보기는 보기 도구 모음에서 보기 작업을 노출할 수 있습니다. 노이즈와 혼란을 피하기 위해 너무 많은 작업을 추가하지 않도록 주의하십시오. 기본 제품 아이콘을 사용하면 확장이 네이티브 UI와 함께 맞도록 하는 데 도움이 됩니다. 그러나 사용자 정의 아이콘이 필요한 경우 SVG 아이콘을 공급할 수 있습니다.

Example of View Actions

© . This site is unofficial and not affiliated with Microsoft.