위젯의 기본 스타일

Azure DevOps 서비스 | Azure DevOps Server | Azure DevOps Server 2022

위젯 SDK에서 제공하는 기본 스타일을 사용하여 대시보드 위젯 간에 일관된 모양을 만듭니다.

위젯 스타일을 포함하려면 위젯 초기화 중에 호출 WidgetHelpers.IncludeWidgetStyles() 합니다.

WidgetHelpers.IncludeWidgetStyles();

위젯의 iframe에 sdk-widget.css을 로드하여 글꼴 패밀리, 글꼴 크기, 여백, 안쪽 여백, 머리글 및 링크에 대한 스타일을 적용합니다.

위젯 구성 패널의 경우 다음을 대신 호출 WidgetHelpers.IncludeWidgetConfigurationStyles() 합니다.

WidgetHelpers.IncludeWidgetConfigurationStyles();

글꼴 패밀리, 글꼴 크기 및 sdk-widget-configuration.css, input, textarea와 같은 일반적인 양식 요소에 대한 스타일을 제공하는 select을(를) 로드합니다.

작업 예제는 확장 샘플을 참조하세요.

위젯 본문, 제목 및 설명

위젯의 컨테이너 요소에 클래스를 추가 widget 하면 위젯 내용에 대한 안쪽 여백, 글꼴 및 색이 자동으로 표시됩니다.

사용자가 해당 용도를 한눈에 식별할 수 있도록 항상 위젯의 제목을 포함합니다. 클래스 <h2>과 함께 title를 사용합니다. 또한 화면 읽기 프로그램은 대시보드에서 다양한 위젯을 식별하는 데 도움이 됩니다.

디자인 원칙: 위젯에는 제목이 있어야 합니다. <h2> 클래스와 함께 title 태그를 사용합니다.

설명을 추가하려면 위젯 설명이 포함된 요소에서 클래스를 사용합니다 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>

위젯 제목 및 자막

자막은 제목을 보완하며 컨텍스트에서 읽을 때는 의미가 없을 수 있습니다.

디자인 원칙: 클래스를 subtitle 사용하여 위젯에 대한 자세한 정보를 제공합니다.

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>

제목 및 자막 조합에 대한 팁:

• 제목과 동일한 줄에 부제목을 표시할 때와 같은 <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>

계수기

개수를 표시하는 위젯의 숫자를 포함하는 요소에 big-count 클래스를 추가합니다. 쿼리 타일 및 코드 타일 위젯은 동일한 스타일을 사용합니다.

디자인 원칙: 클래스를 big-count 사용하여 큰 글꼴로 숫자를 표시합니다. 숫자가 아닌 문자와 함께 사용하지 마세요.

<div class="widget">
    <h2 class="title">Counter widget</h2>
	<div class="big-count">223</div>
	<div>Additional text</div>
</div>

클릭 가능한 위젯

위젯을 클릭할 수 있도록 하려면 아무 곳이나 선택하면 다른 페이지로 이동합니다.

1. 위젯 컨테이너 요소의 자식으로 앵커 태그를 추가합니다.
2. 모든 위젯 콘텐츠를 앵커 태그 안에 넣습니다.
3. 새 탭에서 링크가 열리도록 앵커 태그에 추가 target="_blank" 합니다.
4. clickable 위젯 컨테이너에 클래스를 추가합니다.

클래스가 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>

구성 양식 요소

위젯 구성의 일반적인 양식 요소에 대해 다음 클래스를 사용합니다.

다음 예제에서는 표에 나열된 각 양식 요소를 사용합니다.

<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" placeholder="Type Here">

		<span class="validation-error">
			<span class="icon-error-exclamation"></span>
			<span class="validation-error-text"></span>
		</span>
	</div>
</div>

그리고 JavaScript:

const input = document.querySelector(".single-line-text-input input");
const errorText = document.querySelector(".single-line-text-input .validation-error-text");

input.addEventListener("input", function () {
    if (input.value === "") {
        errorText.textContent = "Please enter your name.";
        errorText.parentElement.style.visibility = "visible";
    } else {
        errorText.parentElement.style.visibility = "hidden";
    }
});