Grundläggande format för dina widgetar

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

Tips/Råd

För den senaste utvecklingsvägledningen för tillägg, inklusive teman och migrering från VSS. SDK, se utvecklarportalen för Azure DevOps Extension SDK.

Använd de grundläggande formatmallarna som tillhandahålls av Widget SDK för ett konsekvent utseende över instrumentpanelswidgetar.

För att inkludera widgetstilar anropar du WidgetHelpers.IncludeWidgetStyles() under widgetinitieringen.

WidgetHelpers.IncludeWidgetStyles();

Detta laddas sdk-widget.css in i widgetens iframe och tillhandahåller stilar för teckensnittsfamilj, teckenstorlek, marginaler, utfyllnader, rubriker och länkar.

För widgetkonfigurationspaneler anropar du WidgetHelpers.IncludeWidgetConfigurationStyles() i stället:

WidgetHelpers.IncludeWidgetConfigurationStyles();

Detta läser in sdk-widget-configuration.css, som innehåller format för teckensnittsfamilj, teckenstorlek och vanliga formulärelement som input, textareaoch select.

Anmärkning

Lägg till en widget klass i HTML-elementet som innehåller widgeten för att dessa format ska tillämpas. Alla formatmallar från sdk-widget.css är begränsade till den här klassen. På samma sätt lägger du till en widget-configuration klass för elementet som innehåller widgetkonfigurationen.

Ett fungerande exempel finns i tilläggsexemplet.

Widgettext, rubrik och beskrivning

Genom att lägga till widget klassen i widgetens containerelement får du automatiskt utfyllnad, teckensnitt och färg för widgetinnehåll.

Inkludera alltid en rubrik för widgeten så att användarna snabbt kan identifiera dess syfte. Använd <h2> med title klassen . Detta hjälper även skärmläsare att identifiera de olika widgetarna på instrumentpanelen.

Designprincip: Widgetar bör ha en rubrik. Använd taggen <h2> med title klassen .

Om du vill lägga till en beskrivning använder du description klassen på elementet som innehåller din widgetbeskrivning.

Designprincip:description Använd klassen för widgetbeskrivningen. Beskrivningar bör vara meningsfulla även när de läss utanför widgetkontexten.

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

Undertexter kompletterar rubriken och kanske inte är meningsfulla när de läss ur sitt sammanhang.

Designprincip:subtitle Använd klassen för att ge mer information om widgeten.

Använd klasserna title, inner-titleoch subtitle för att få rätt teckensnitt, färg och marginaler för en kombination av rubrik och underrubrik. Underrubriken har en dämpad färg i förhållande till rubriken.

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

Tips för kombination av rubrik och underrubrik:

Använd ett infogat element som <span> för att underrubriken ska visas på samma rad som rubriken.
Använd ett blockelement som <div> för att underrubriken ska visas på en ny rad.

Länkar med ikoner och undertext

Vissa widgetar innehåller länkar med en ikon, text och undertext.

Designprincip: Använd länkar med en ikon och undertext för att göra syftet med länken uppenbar för användaren. Se till att ikonen symboliserar länkens mål.

Använd HTML-strukturen och klasserna nedan för att få samma utseende och känsla.

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

Räknare

För widgetar som visar ett antal lägger du till big-count klassen på elementet som innehåller talet. Widgetarna Frågepanel och Kodpanel använder samma formatmall.

Designprincip:big-count Använd klassen för att visa tal i stort teckensnitt. Använd den inte med icke-numeriska tecken.

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

Klickbara widgetar

För att göra en widget klickbar så att du kan navigera till en annan sida genom att klicka var som helst:

Lägg till en ankartagg som underordnad widgetbehållarelementet.
Placera allt widgetinnehåll i fästpunktstaggen.
Lägg till target="_blank" i fästpunktstaggen så att länken öppnas på en ny flik.
clickable Lägg till klassen i widgetcontainern.

Utan clickable-klassen använder all text i widgeten den blå standardlänkfärgen. Klassen clickable innehåller också en anpassad fokusindikator för tangentbordsnavigering.

Designprincip:clickable Använd klassen och taggen <a> för att göra hela widgeten klickbar. Det här mönstret fungerar bra när widgeten sammanfattar data som är tillgängliga på en annan sida.

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

Konfigurationsformulärelement

Använd följande klasser för vanliga formulärelement i widgetkonfigurationen:

Formulärelement	Inslagningskomponent	Riktlinjer
Enkel textruta	`div` med klassen "single-line-text-input".	Använd ett `label` element för att lägga till text bredvid textrutan. Använd elementet `input` för att skapa en textruta. `placeholder` Använd attributet för att ange platshållartext.
Kryssruta	`fieldset` med klassen "checkbox"	Använd ett `label` element för att lägga till text bredvid varje kryssruta. Använd ett `legend` element för att bildtexta gruppen med kryssrutor. `for` Använd attributet för varje `label` element för att hjälpa skärmläsare att förstå formulärelementet.
Alternativknapp	`fieldset` med klass "radio"	Använd ett `label`-element för att lägga till text intill varje alternativknapp. Använd ett `legend`-element för att ge en bildtext till alternativknapparna. `for` Använd attributet för varje `label` element för att hjälpa skärmläsare att förstå formulärelementet.
Listruta	`div` med klassen "dropdown"	Använd ett `label` element för att lägga till text bredvid listrutan. Om du vill ha en listruta som upptar halva bredden lägger du till klassen "half" i omslutningselementet `div` . Om du vill använda standardpilikonen från sdk:en i stället för den som tillhandahålls av webbläsaren, omsluter du elementet `select` med en annan `div` med klassen "wrapper".
Textruta med flera rader	`div` med klassen "multi-line-text-input".	Använd `label` element för att märka elementet `textarea` som används som textruta med flera rader.

I följande exempel används vart och ett av de formulärelement som anges i tabellen.

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

Verifieringsfelmeddelanden

Om du vill visa valideringsfel under formulärelement på ett sätt som överensstämmer med förstapartswidgetar lägger du till följande kodfragment under varje formulärelement:

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

Synligheten är dold som standard. Om du vill visa ett felmeddelande letar du upp motsvarande validation-error-text-element, anger dess text och tilldelar visibility: visible till dess överordnade element.

Om du till exempel vill visa ett fel när en textruta är tom:

Html för detta skulle vara:

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

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

Feedback

Var den här sidan till hjälp?

Last updated on 2026-04-03