Základní styly widgetů

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

Doporučujeme používat základní styly poskytované prostřednictvím sady SDK widgetů. Použití těchto stylů vám pomůže rychle a snadno vytvořit widget, který je konzistentní se zbytkem widgetů na řídicím panelu. Pokud chcete tyto styly použít, přidejte do bloku následující řádek VSS.require v kódu JavaScriptu pro widget.

Návod

Projděte si naši nejnovější dokumentaci k vývoji rozšíření pomocí Azure DevOps Extension SDK.

	WidgetHelpers.IncludeWidgetStyles();

Tím se stáhne šablona stylů podle názvu sdk-widget.css a zahrne ji do prvku iframe widgetu. Obsahuje styly pro rodinu písem, velikost písma, okraj a odsazení widgetu. Obsahuje také styly nadpisů (h1, h2, h3 atd.), odkazy a další.

Podobně pokud chcete použít běžné styly v konfiguraci widgetu, zahrňte řádek pod VSS.require blokem do kódu JavaScriptu pro konfiguraci widgetu.

	WidgetHelpers.IncludeWidgetConfigurationStyles();

Tím se stáhne šablona stylů podle názvu sdk-widget-configuration.css a zahrne ji do prvku iframe pro konfiguraci widgetu. Obsahuje styly pro rodinu písem, velikost písma a styly pro běžné prvky formuláře, jako jsou vstup, textarea a výběr.

Poznámka:

Aby se tyto styly použily u widgetu, musíte přidat třídu widgetu do elementu HTML, který obsahuje váš widget. Všechny styly z sdk-widgets.css jsou vymezeny na tuto třídu. Podobně přidejte třídu widget-configuration do elementu HTML, který obsahuje konfiguraci widgetu. Všechny styly z sdk-widget-configuration.css jsou vymezeny na tuto třídu.

Stáhněte si ukázku rozšíření.

Text widgetu, název a popis

Přidáním "widgetu" třídy do elementu HTML, který obsahuje váš widget, automaticky dostanete odsazení, písmo a barvu pro obsah widgetu.

Vždy byste měli mít název widgetu. To uživateli pomůže na první pohled identifikovat váš widget a jeho funkce. Používá se <h2> se třídou "title". To také pomáhá lidem používajícím čtečky obrazovky rychle identifikovat různé widgety na řídicím panelu.

Princip návrhu: Widgety by měly mít název. Použijte značku <h2> s třídou "title".

Někdy můžete chtít zadat malý popis widgetu nebo jeho použití. V takových případech použijte třídu "description" u elementu HTML, který chcete použít pro popis widgetu.

Princip návrhu: Pro popis widgetu použijte třídu "description". Popisy by měly dávat smysl i při čtení z kontextu widgetu.

	<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>

Titulky jsou text, který doplňuje název. Nemusí vždy dávat smysl při čtení z kontextu bez čtení názvu.

Princip návrhu: K poskytnutí dalších informací o widgetu použijte třídu "podnadpis". Nemusí to dávat smysl z kontextu widgetu.

Pomocí následující struktury a tříd "title", "inner-title" a "podnadpis" získáte správné písmo, barvu a okraje pro kombinaci nadpisů a titulků. Nadpis získá větší velikost písma než podnadpis. Podnadpis má tlumenou barvu vzhledem k názvu nebo zbytku widgetu.

	<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>

Pro kombinaci názvu a podnadpisu můžete použít libovolný element HTML. Tady je několik tipů:

Pokud potřebujete, aby se podnadpis zobrazoval na stejném řádku jako název, použijte vložený prvek, například <span>
Pokud potřebujete, aby se podnadpis zobrazoval na dalším řádku názvu, použijte blokový prvek, například <div>

Některé widgety obsahují odkazy, které mají ikonu, text a podtext na odkaz.

Princip návrhu: Pomocí odkazů s ikonou a podtextem můžete uživateli usnadnit účel odkazu. Ujistěte se, že ikona symbolizuje cíl odkazu.

Pokud chcete získat stejný vzhled a chování, použijte následující strukturu a třídy 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>

Primárním účelem některých widgetů je zobrazení počtu některých dat. Dlaždice dotazu a widgety Dlaždice kódu jsou příklady v této kategorii widgetů. Pokud chcete použít stejné styly jako tyto widgety, přidejte třídu "big-count" do elementu HTML, který obsahuje číslo, abyste získali velké písmo, které používá dlaždice dotazu a widgety Dlaždice kódu.

Princip návrhu: K prezentaci uživatele s čísly velkým písmem použijte třídu big-count. Neměl by se používat s nečíselnými znaky.

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

Kliknutím kamkoli na některé widgety uživatele přesměruje na jinou stránku. Pokud chcete, aby widget udělal totéž, můžete:

Přidejte značku ukotvení jako podřízenou k elementu HTML, který funguje jako kontejner widgetu.
Vložte všechen obsah widgetu do kotvového tagu.
Vzhledem k tomu, že je widget hostovaný v prvku iframe, přidejte do značky ukotvení atribut "target" s hodnotou "_blank", aby se odkaz otevře na nové kartě nebo okně namísto uvnitř stejného prvku iframe.
Kromě třídy widget přidejte do kontejneru widgetu třídu "clickable".

Obsah widgetu získá správné barvy, i když je uvnitř odkazu. Bez třídy "klikatelné" je výchozí modrá barva vynucena na veškerý text uvnitř widgetu. Widget také získá vlastní vizuální indikátor při zaostření, který pomáhá uživatelům, kteří používají klávesnici k navigaci na řídicím panelu.

Princip návrhu: Pomocí třídy "clickable" a značky <a> můžete nastavit, aby bylo možné kliknout na celý widget. To je ideální, když je widget souhrnem dat dostupných na jiné stránce.

<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>

Pokud chcete použít základní styly ze sady SDK widgetu pro běžné prvky formuláře v konfiguraci widgetu, postupujte podle těchto pokynů:

Formulářový prvek	Prvek zabalení	Pokyny
Jednoduché textové pole	`div` s třídou "jednořádkového textového vstupu".	Použijte prvek `label` k přidání textu vedle textového pole. Pomocí elementu `input` vytvořte textové pole. Pomocí atributu `placeholder` zadejte zástupný text.
Zaškrtávací políčko	`fieldset` s třídou "checkbox"	Pomocí elementu `label` přidejte text vedle každého zaškrtávacího políčka. Použijte prvek `legend` k titulkování skupiny zaškrtávacích políček. Použijte atribut `for` u každého prvku `label`, aby čtečky obrazovky lépe pochopily prvek formuláře.
Rádiový tlačítko	`fieldset` s třídou "radio"	`label` Pomocí prvku můžete přidat text vedle každého přepínače. Použijte prvek `legend` k označení skupiny přepínačů. Použijte atribut `for` u každého prvku `label`, aby čtečky obrazovky lépe pochopily prvek formuláře.
Rozevírací seznam	`div` s třídou "dropdown"	Pomocí elementu `label` přidejte text vedle rozevíracího seznamu. Pokud chcete, aby rozevírací seznam zabíral polovinu šířky, přidejte do elementu wrapping `div` třídu "half". Pokud chcete použít standardní ikonu šipky ze sady SDK místo té, kterou poskytuje prohlížeč, zabalte prvek `select` další třídou `div` s názvem "wrapper".
Víceřádkové textové pole	`div` s atributem třídy "multi-line-text-input".	Použijte prvek `label` k označení prvku `textarea` používaného jako víceřádkové textové pole.

Následující příklad používá všechny prvky formuláře uvedené v tabulce.

<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>

Zobrazení chyb ověření pod prvkem formuláře

Doporučujeme zobrazit chyby ověření pod příslušnými prvky formuláře. Chcete-li tyto zprávy zobrazit způsobem konzistentním s widgety 1. strany, přidejte následující fragment kódu do každého prvku formuláře, pro který chcete zobrazit chybovou zprávu.

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

Předchozí fragment kódu má ve výchozím nastavení skrytou viditelnost. Pokaždé, když chcete zobrazit chybovou zprávu, vyhledejte odpovídající text "validation-error-text", přidejte do něj text a nastavte visibility:visible ho na nadřazené.

Příklad: Existuje jednoduché textové pole, do kterého musí uživatel zadat řetězec. Pokud je textové pole prázdné, musíte zobrazit chybovou zprávu.

Kód HTML pro toto by byl:

<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>

A za tímto by byl kód JavaScriptu:

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");
	});

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-12-17

Sdílet prostřednictvím

Základní styly widgetů

Text widgetu, název a popis

Nadpisy a titulky widgetů

Zobrazení hypertextových odkazů, ikon, textu a podtextu ve widgetu

Zobrazení čítačů ve widgetu

Vytvoření widgetu jako hypertextového odkazu

Styly pro běžné prvky formuláře v konfiguraci widgetu

Zobrazení chyb ověření pod prvkem formuláře

Váš názor

Další materiály