Базовые стили для мини-приложений

Сервисы Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Подсказка

Для получения последних рекомендаций по разработке расширений, включая темизацию и миграцию из VSS.SDK, смотрите на портале разработчика пакета SDK для расширений Azure DevOps.

Используйте базовые стили, предоставляемые пакетом SDK мини-приложений для согласованного просмотра мини-приложений панели мониторинга.

Чтобы включить стили мини-приложений, вызов WidgetHelpers.IncludeWidgetStyles() во время инициализации мини-приложений:

WidgetHelpers.IncludeWidgetStyles();

Это загружает sdk-widget.css в iframe вашего мини-приложения, предоставляя стили для семейства шрифтов, размеров шрифта, полей, отступов, заголовков и ссылок.

Для панелей конфигурации мини-приложений вызовите WidgetHelpers.IncludeWidgetConfigurationStyles() :

WidgetHelpers.IncludeWidgetConfigurationStyles();

Это загружает sdk-widget-configuration.css, который предоставляет стили для семейства шрифтов, размера шрифта и общих элементов формы, таких как input, textarea и select.

Замечание

Чтобы применить эти стили, добавьте widget класс на элемент HTML, содержащий мини-приложение. Все стили из sdk-widget.css находятся в области действия этого класса. Аналогичным образом добавьте widget-configuration класс в элемент, содержащий конфигурацию мини-приложения.

Рабочий пример см. в примере расширения.

Тело виджета, название и описание

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>

Мини-приложения, доступные для щелчка

Чтобы сделать виджет кликабельным, так чтобы при выборе его в любом месте происходил переход на другую страницу:

Добавьте тег привязки в качестве дочернего элемента контейнера мини-приложения.
Поместите все содержимое мини-приложения в тег привязки.
Добавьте target="_blank" к тегу привязки, чтобы ссылка открывалось на новой вкладке.
Добавьте класс 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>Select me!</div>
	</a>
</div>

Элементы формы конфигурации

Используйте следующие классы для распространенных элементов формы в конфигурации мини-приложения:

Элемент формы	Элемент оболочки	Guidelines
Простое текстовое поле	`div` с классом "single-line-text-input".	Используйте элемент `label` для добавления текста рядом с текстовым полем. Используйте элемент `input` для создания текстового поля. Используйте атрибут `placeholder` для указания текста заполнителя.
флажок	`fieldset` с классом «checkbox»	Используйте элемент `label` для добавления текста рядом с каждым флажком. Используйте элемент `legend` для подписей группы флажков. На каждом `for` элементе используйте атрибут `label`, чтобы помочь средствам чтения с экрана понять элемент формы.
переключатель радиокнопка	`fieldset` с классом "radio"	Используйте элемент `label` для добавления текста рядом с каждой радиокнопкой. Используйте элемент `legend` для заголовка группы радиокнопок. На каждом `for` элементе используйте атрибут `label`, чтобы помочь средствам чтения с экрана понять элемент формы.
Раскрывающийся список	`div` с атрибутом class "dropdown"	Используйте элемент `label` для добавления текста рядом с раскрывающимся списком. Если вы хотите, чтобы раскрывающийся список занимал половину ширины, добавьте класс "half" в элемент оболочки `div` . Если вы хотите использовать стандартный значок стрелки из пакета SDK вместо того, который предоставляет браузер, оберните элемент `select` другим `div` с классом "wrapper".
Текстовое поле с несколькими строками	`div` с классом "multi-line-text-input".	Используйте `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" 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";
    }
});

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-04-03