ウィジェットの基本的なスタイル

Azure DevOps Services |Azure DevOps Server |Azure DevOps Server 2022

ヒント

テーマ設定や VSS からの移行など、最新の拡張機能開発ガイダンスについて説明します。SDK については、 Azure DevOps Extension SDK 開発者ポータルを参照してください。

ウィジェット SDK によって提供される基本的なスタイルを使用して、ダッシュボードウィジェット全体で一貫した外観を実現します。

ウィジェットスタイルを含めるには、ウィジェットの初期化中に WidgetHelpers.IncludeWidgetStyles() を呼び出します。

WidgetHelpers.IncludeWidgetStyles();

これにより、 sdk-widget.css がウィジェットの iframe に読み込まれます。これにより、フォントファミリ、フォントサイズ、余白、パディング、見出し、リンクのスタイルが提供されます。

ウィジェット構成パネルの場合は、代わりに WidgetHelpers.IncludeWidgetConfigurationStyles() を呼び出します。

WidgetHelpers.IncludeWidgetConfigurationStyles();

これにより、 sdk-widget-configuration.cssが読み込まれ、フォントファミリ、フォントサイズ、 input、 textarea、 selectなどの一般的なフォーム要素のスタイルが提供されます。

注

これらのスタイルを適用するには、ウィジェットを含む HTML 要素に widget クラスを追加します。 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>Click me!</div>
	</a>
</div>

構成フォーム要素

ウィジェット構成の一般的なフォーム要素には、次のクラスを使用します。

Form 要素	ラッピング要素	Guidelines
単純なテキストボックス	`div` クラス "single-line-text-input" を使用します。	`label`要素を使用して、テキストボックスの横にテキストを追加します。 `input`要素を使用してテキストボックスを作成します。プレースホルダーテキストを指定するには、 `placeholder` 属性を使用します。
チェックボックス	`fieldset` "checkbox" クラス	`label`要素を使用して、各チェックボックスの横にテキストを追加します。 `legend`要素を使用して、チェックボックスのグループにキャプションを付けます。各`for`要素の`label`属性を使用して、スクリーンリーダーがフォーム要素を理解できるようにします。
ラジオボタン	`fieldset` クラス「radio」	`label`要素を使用して、各ラジオボタンの横にテキストを追加します。 `legend`要素を使用して、ラジオボタンのグループにキャプションを付ける。各`for`要素の`label`属性を使用して、スクリーンリーダーがフォーム要素を理解できるようにします。
ドロップダウン	`div` クラス「ドロップダウン」	`label`要素を使用して、ドロップダウンの横にテキストを追加します。幅の半分を占めるドロップダウンが必要な場合は、ラップ `div` 要素にクラス "half" を追加します。ブラウザーによって提供される矢印アイコンではなく、sdk の標準矢印アイコンを使用する場合は、クラス "ラッパー" を持つ別の`select`で`div`要素をラップします。
複数行テキストボックス	`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

次の方法で共有