위젯의 기본 스타일
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
위젯 SDK를 통해 제공되는 기본 스타일을 사용하는 것이 좋습니다. 이러한 스타일을 사용하면 대시보드의 나머지 위젯과 일치하는 위젯을 빠르고 쉽게 만들 수 있습니다.
이러한 스타일을 사용하려면 위젯에 대한 JavaScript 코드의 VSS.require 블록 내부에 아래 줄을 추가합니다.
팁
Azure DevOps 확장 SDK를 사용하여 확장 개발에 대한 최신 설명서를 확인하세요.
WidgetHelpers.IncludeWidgetStyles();
그러면 이름 sdk-widget.css 스타일시트를 끌어와 위젯의 iframe에 포함합니다. 여기에는 위젯의 글꼴 패밀리, 글꼴 크기, 여백 및 안쪽 여백에 대한 스타일이 포함됩니다. 제목(h1, h2, h3 등), 링크 등에 대한 스타일도 포함됩니다.
마찬가지로 위젯 구성에서 공통 스타일을 사용하려면 위젯 구성에 대한 JavaScript 코드의 블록 내부에 VSS.require 아래 줄을 포함합니다.
WidgetHelpers.IncludeWidgetConfigurationStyles();
이렇게 하면 이름 sdk-widget-configuration.css 스타일시트를 가져와서 위젯 구성에 대한 iframe에 포함합니다. 여기에는 글꼴 패밀리 스타일, 글꼴 크기 및 입력, 텍스트 영역 및 선택과 같은 일반적인 양식 요소에 대한 스타일이 포함됩니다.
참고 항목
이러한 스타일을 위젯에 적용하려면 위젯이 포함된 HTML 요소에 "위젯" 클래스를 추가해야 합니다. sdk-widgets.css 모든 스타일은 이 클래스로 범위가 지정됩니다. 마찬가지로 위젯 구성을 포함하는 HTML 요소에 "위젯 구성" 클래스를 추가합니다. sdk-widget-configuration.css 모든 스타일은 이 클래스로 범위가 지정됩니다.
위젯 본문, 제목 및 설명
위젯이 포함된 HTML 요소에 클래스 "위젯"을 추가하면 위젯 내용에 대한 안쪽 여백, 글꼴 및 색이 자동으로 표시됩니다.
위젯의 제목은 항상 있어야 합니다. 이렇게 하면 사용자가 위젯 및 해당 기능을 한눈에 확인할 수 있습니다.
클래스 "title"과 함께 사용합니다 <h2> . 또한 화면 읽기 프로그램을 사용하여 대시보드에서 다양한 위젯을 빠르게 식별할 수 있습니다.
디자인 원칙: 위젯에는 제목이 있어야 합니다.
<h2>"title" 클래스와 함께 태그를 사용합니다.
위젯 또는 사용 방법에 대한 작은 설명을 제공할 수도 있습니다. 이러한 경우 위젯 설명에 사용하려는 HTML 요소에 "description" 클래스를 사용합니다.
디자인 원칙: 위젯 설명에 "description" 클래스를 사용합니다. 설명은 위젯 컨텍스트에서 읽어도 의미가 있습니다.
<div class="widget">
<h2 class="title">Widget title</h2>
<div class="description">The widget description is used to describe the widget. It makes sense even when read outside of the widget context.</div>
<p>Place widget content here.</p>
</div>
위젯 제목 및 자막
자막은 제목을 보완하는 텍스트입니다. 제목을 읽지 않고 컨텍스트를 읽을 때 항상 의미가 있는 것은 아닙니다.
디자인 원칙: "부제목" 클래스를 사용하여 위젯에 대한 자세한 정보를 제공합니다. 위젯 컨텍스트에서 이해가 되지 않을 수 있습니다.
아래 구조체와 클래스 "title", "inner-title" 및 "subtitle"을 사용하여 제목과 부제목 조합에 대한 올바른 글꼴, 색 및 여백을 가져옵니다. 제목은 부제목보다 큰 글꼴 크기를 가져옵니다. 부제목은 제목이나 위젯의 나머지 부분을 기준으로 차분한 색을 줍니다.
<div class="widget">
<h2 class="title">
<div class="inner-title">Widget title</div>
<div class="subtitle">Widget subtitle</div>
</h2>
<div class="content">
Place widget content here.
</div>
</div>
제목 및 부제목 조합에 html 요소를 사용할 수 있습니다. 다음 팁을 참조하세요.
- 제목과 동일한 줄에 부제목을 표시해야 하는 경우 다음과 같은 인라인 요소를 사용합니다.
<span> - 제목에서 다음 줄에 부제목을 표시해야 하는 경우 다음과 같은 블록 요소를 사용합니다.
<div>
위젯에 하이퍼링크, 아이콘, 텍스트 및 하위 텍스트 표시
일부 위젯에는 링크당 아이콘, 텍스트 및 하위 텍스트가 있는 링크가 있습니다.
디자인 원칙: 아이콘 및 하위 텍스트가 있는 링크를 사용하여 링크의 용도를 사용자에게 명확히 표시합니다. 아이콘이 링크의 대상을 상징하는지 확인합니다.
동일한 모양과 느낌을 얻으려면 아래 HTML 구조 및 클래스를 사용합니다.
<div class="widget">
<h2 class="title">Widget title</h2>
<div class="content">
<p>Place your content here.</p>
<a class="link-with-icon-text" href="http://bing.com" target="_blank">
<span class="icon-container" style="background-color: #68217A"></span>
<div class="title">
Primary link text
<div class="subtitle">Link subtext</div>
</div>
</a>
</div>
</div>
위젯에 카운터 표시
일부 위젯의 주요 목적은 일부 데이터의 수를 표시하는 것입니다. 쿼리 타일 및 코드 타일 위젯은 이 위젯 범주의 예입니다. 이러한 위젯과 동일한 스타일을 사용하려면 숫자를 포함하는 HTML 요소에 "big-count" 클래스를 추가하여 쿼리 타일 및 코드 타일 위젯에서 사용되는 큰 글꼴을 가져옵니다.
디자인 원칙: "big-count" 클래스를 사용하여 사용자에게 큰 글꼴로 숫자를 표시합니다. 숫자가 아닌 문자와 함께 사용하면 안 됩니다.
<div class="widget">
<h2 class="title">Counter widget</h2>
<div class="big-count">223</div>
<div>Additional text</div>
</div>
위젯을 하이퍼링크로 만들기
일부 위젯에서 아무 곳이나 클릭하면 사용자가 다른 페이지로 리디렉션됩니다. 위젯이 동일한 작업을 수행하도록 하려면 다음을 수행할 수 있습니다.
- 위젯 컨테이너 역할을 하는 HTML 요소에 앵커 태그를 자식으로 추가합니다.
- 모든 위젯 콘텐츠를 앵커 태그 안에 넣습니다.
- 위젯이 iframe에서 호스트되므로 동일한 iframe 내부가 아닌 새 탭/창에서 링크가 열리도록 앵커 태그에 값이 "_blank"인 "target" 특성을 추가합니다.
- "위젯" 클래스 외에도 위젯 컨테이너에 "clickable" 클래스를 추가합니다.
위젯 콘텐츠는 앵커 태그 내에 있더라도 올바른 색을 가져옵니다. "clickable" 클래스가 없으면 위젯 내의 모든 텍스트에 기본 파란색이 적용됩니다. 또한 위젯은 키보드를 사용하여 대시보드를 탐색하는 사용자를 돕기 위해 포커스에 대한 사용자 지정 시각적 신호를 가져옵니다.
디자인 원칙: "clickable" 클래스와 태그를
<a>사용하여 전체 위젯을 클릭할 수 있도록 합니다. 위젯이 다른 페이지에서 사용할 수 있는 데이터의 요약인 경우에 이상적입니다.
<div class="widget clickable">
<a href="https://bing.com" target="_blank">
<h2 class="title">Counter widget</h2>
<div class="big-count">223</div>
<div>Click me!</div>
</a>
</div>
위젯 구성의 일반적인 양식 요소에 대한 스타일
위젯 구성의 일반적인 양식 요소에 위젯 sdk의 기본 스타일을 사용하려면 다음 지침을 따르세요.
| 양식 요소 | 래핑 요소 | 가이드라인 |
|---|---|---|
| 간단한 텍스트 상자 | div 클래스가 "단일 줄 텍스트 입력"인 경우 |
label 요소를 사용하여 텍스트 상자 옆에 텍스트를 추가합니다. input 요소를 사용하여 텍스트 상자를 만듭니다. placeholder 자리 표시자 텍스트를 제공하려면 이 특성을 사용합니다. |
| 체크 박스 | fieldset클래스가 "검사box"인 경우 |
label 요소를 사용하여 각 검사 상자 옆에 텍스트를 추가합니다. legend 요소를 사용하여 검사boxs 그룹을 캡션. 각 label 요소의 for 특성을 사용하여 화면 읽기 프로그램에서 양식 요소를 이해할 수 있도록 합니다. |
| 라디오 단추 | fieldset 클래스 "radio"가 있는 경우 |
label 요소를 사용하여 각 라디오 단추 옆에 텍스트를 추가합니다. legend 요소를 사용하여 라디오 단추 그룹을 캡션. 각 label 요소의 for 특성을 사용하여 화면 읽기 프로그램에서 양식 요소를 이해할 수 있도록 합니다. |
| 드롭다운 | div 클래스 "드롭다운"을 사용하여 |
label 요소를 사용하여 드롭다운 옆에 텍스트를 추가합니다. 너비의 절반을 차지하는 드롭다운을 하려면 래핑 div 요소에 클래스 "half"을 추가합니다. 브라우저에서 제공하는 아이콘 대신 sdk의 표준 화살표 아이콘을 사용하려면 "래퍼" 클래스를 사용하여 요소를 다른 div 항목으로 래핑 select 합니다. |
| 여러 줄 텍스트 상자 | div 클래스가 "다중 줄 텍스트 입력"인 경우 |
요소를 사용하여 label 여러 줄 텍스트 상자로 사용되는 요소에 textarea 레이블을 지정합니다. |
아래 예제에서는 표에 나열된 각 양식 요소를 사용합니다.
<div class="widget-configuration">
<div class="single-line-text-input" id="name-input">
<label>Your name</label>
<input type="text" value="Contoso"></input>
</div>
<div class="dropdown" id="query-path-dropdown">
<label>Drop down</label>
<div class="wrapper">
<select>
<option value="Shared Queries/Feedback">Shared Queries/Feedback</option>
<option value="Shared Queries/My Bugs">Shared Queries/My Bugs</option>
<option value="Shared Queries/My Tasks">Shared Queries/My Tasks</option>
</select>
</div>
<fieldset class="checkbox" id="select-results">
<legend>Select results to display</legend>
<input type="checkbox" id="check-option1" value="id" name="check" checked="true">
<label for="check-option1">Query ID</label><br/>
<input type="checkbox" id="check-option2" value="name" name="check" checked="true">
<label for="check-option2">Query Name</label><br/>
<input type="checkbox" id="check-option3" value="createdBy" name="check" checked="true">
<label for="check-option3">Created By</label><br/>
</fieldset>
<fieldset class="radio" id="display-options">
<legend>Display as </legend>
<input type="radio" id="radio-option1" value="ordered" name="radio" checked="true">
<label for="radio-option1">Ordered List</label><br/>
<input type="radio" id="radio-option2" value="unordered" name="radio">
<label for="radio-option2">Unordered List</label><br/>
</fieldset>
<div class="multi-line-text-input">
<label>Comments</label>
<textarea></textarea>
</div>
</div>
</div>
양식 요소 아래에 유효성 검사 오류 표시
관련 양식 요소 아래에 유효성 검사 오류를 제공하는 것이 좋습니다. 이러한 메시지를 자사 위젯과 일치하는 방식으로 표시하려면 오류 메시지를 표시할 각 양식 요소 아래에 다음 코드 조각을 추가합니다.
<span class="validation-error">
<span class="icon-error-exclamation"></span>
<span class="validation-error-text"></span>
</span>
이전 코드 조각에는 기본적으로 숨겨진 표시 유형이 있습니다. 오류 메시지를 표시할 때마다 해당 "validation-error-text"를 찾아 텍스트를 추가하고 부모에 설정합니다 visibility:visible .
예: 사용자가 문자열을 입력해야 하는 간단한 텍스트 상자가 있습니다. 텍스트 상자가 비어 있는 경우 오류 메시지를 표시해야 합니다.
이에 대한 html은 다음과 같습니다.
<div class="widget-configuration">
<div class="single-line-text-input">
<label>Your name</label>
<input type="text">Type Here</input>
<span class="validation-error">
<span class="icon-error-exclamation"></span>
<span class="validation-error-text"></span>
</span>
</div>
</div>
그리고 이 뒤에 있는 JavaScript 코드는 다음과 같습니다.
var $singleLineInput = $(".single-line-text-input input");
var $errorSingleLineInput = $(".single-line-text-input input .validation-error-text");
$singleLineInput.on("input", function(){
if ($singleLineInput.val() == ""){
$errorSingleLineInput.text("Please enter your name.");
$errorSingleLineInput.parent().css("visibility", "visible");
return;
}
$errorSingleLineInput.parent().css("visibility", "hidden");
});
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기