Grundlegende Stile für Ihre Widgets

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

Es wird empfohlen, die grundlegenden Stile zu verwenden, die über das Widget SDK bereitgestellt werden. Mithilfe dieser Stile können Sie schnell und einfach ein Widget erstellen, das mit den restlichen Widgets im Dashboard konsistent ist. Um diese Formatvorlagen zu verwenden, fügen Sie die untere Zeile im VSS.require Block im JavaScript-Code für Ihr Widget hinzu.

Tipp

Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mit dem Azure DevOps Extension SDK an.

	WidgetHelpers.IncludeWidgetStyles();

Dadurch wird ein Stylesheet nach dem Namen sdk-widget.css gezogen und im iframe für Ihr Widget eingeschlossen. Es enthält Formatvorlagen für Schriftartenfamilie, Schriftgrad, Rand und Abstand für Ihr Widget. Es enthält auch Formatvorlagen für Überschriften (h1, h2, h3 usw.), Links und mehr.

Wenn Sie gängige Stile in der Widgetkonfiguration verwenden möchten, fügen Sie die folgende Zeile in den VSS.require Block im JavaScript-Code für Ihre Widgetkonfiguration ein.

	WidgetHelpers.IncludeWidgetConfigurationStyles();

Dadurch wird ein Stylesheet nach dem Namen sdk-widget-configuration.css abgerufen und im iframe für Ihre Widgetkonfiguration eingeschlossen. Es enthält Formatvorlagen für Schriftartenfamilie, Schriftgrad und Formatvorlagen für allgemeine Formularelemente wie Eingabe, Textbereich und Auswahl.

Hinweis

Damit diese Formatvorlagen auf Ihr Widget angewendet werden können, müssen Sie dem HTML-Element, das Ihr Widget enthält, eine "Widget"-Klasse hinzufügen. Alle Formatvorlagen aus dem sdk-widgets.css sind auf diese Klasse eingestellt. Fügen Sie auf ähnliche Weise eine Klasse "Widgetkonfiguration" für das HTML-Element hinzu, das Ihre Widgetkonfiguration enthält. Alle Formatvorlagen aus dem sdk-widget-configuration.css sind auf diese Klasse eingestellt.

Laden Sie das Erweiterungsbeispiel herunter.

Widgettext, Titel und Beschreibung

Durch Hinzufügen der Klasse "widget" zum HTML-Element, das Ihr Widget enthält, erhalten Sie automatisch Abstand, Schriftart und Farbe für Widgetinhalte.

Sie sollten immer einen Titel für Ihr Widget haben. Dies hilft dem Benutzer, Ihr Widget und seine Funktionalität auf einen Blick zu identifizieren. Wird mit der Klasse "title" verwendet <h2> . Dies hilft Auch Personen, die Bildschirmsprachausgaben verwenden, um schnell die verschiedenen Widgets im Dashboard zu identifizieren.

Designprinzip: Widgets sollten einen Titel haben. Verwenden Sie das <h2> Tag mit der Klasse "title".

Manchmal möchten Sie vielleicht eine kleine Beschreibung ihres Widgets oder dessen Verwendung bereitstellen. Verwenden Sie in solchen Fällen die Klasse "description" für das HTML-Element, das Sie für die Widgetbeschreibung verwenden möchten.

Designprinzip: Verwenden Sie die Klasse "description" für die Widgetbeschreibung. Beschreibungen sollten auch dann sinnvoll sein, wenn sie aus dem Widgetkontext gelesen werden.

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

Untertitel sind Text, der den Titel ergänzt. Sie sind möglicherweise nicht immer sinnvoll, wenn sie aus dem Kontext gelesen werden, ohne den Titel zu lesen.

Designprinzip: Verwenden Sie die Klasse "untertitel", um weitere Informationen zum Widget bereitzustellen. Es ist möglicherweise nicht sinnvoll, aus dem Widgetkontext heraus zu sein.

Verwenden Sie die folgende Struktur und Klassen "title", "inner-title" und "untertitel", um die richtige Schriftart, Farbe und Ränder für eine Titel- und Untertitelkombination zu erhalten. Der Titel erhält einen größeren Schriftgrad als der Untertitel. Der Untertitel hat eine subduzierte Farbe relativ zum Titel oder rest des Widgets.

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

Sie können jedes html-Element für die Titel- und Untertitelkombination verwenden. Hier sind einige Tipps:

Wenn der Untertitel in derselben Zeile wie der Titel angezeigt werden soll, verwenden Sie ein Inlineelement wie <span>
Wenn der Untertitel in der nächsten Zeile des Titels angezeigt werden soll, verwenden Sie ein Blockelement wie <div>

Einige Widgets verfügen über Links, die über ein Symbol, Text und Untertext pro Link verfügen.

Designprinzip: Verwenden Sie Links mit einem Symbol und Untertext, um den Zweck des Links für den Benutzer offensichtlich zu machen. Stellen Sie sicher, dass das Symbol das Ziel des Links symbolisiert.

Verwenden Sie die folgende HTML-Struktur und -Klassen, um das gleiche Erscheinungsbild zu erzielen.

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

Der Hauptzweck einiger Widgets besteht darin, die Anzahl einiger Daten anzuzeigen. Die Abfragekachel und die Codekachel-Widgets sind Beispiele in dieser Kategorie von Widgets. Um dieselben Formatvorlagen wie diese Widgets zu verwenden, fügen Sie die Klasse "big-count" für das HTML-Element hinzu, das die Zahl enthält, um die große Schriftart abzurufen, die von der Abfragekachel und den Codekachel-Widgets verwendet wird.

Designprinzip: Verwenden Sie die Klasse "big-count", um den Benutzer mit Zahlen in großer Schriftart darzustellen. Sie sollte nicht mit nicht numerischen Zeichen verwendet werden.

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

Durch Klicken auf eine beliebige Stelle auf einigen Widgets wird der Benutzer zu einer anderen Seite umgeleitet. Damit Ihr Widget identisch ist, können Sie:

Fügen Sie dem HTML-Element, das als Widgetcontainer fungiert, ein Ankertag als untergeordnetes Element hinzu.
Platzieren Sie alle Widgetinhalte innerhalb des Ankertags.
Da Ihr Widget in einem iframe gehostet wird, fügen Sie das Attribut "target" mit dem Wert "_blank" zum Ankertag hinzu, damit der Link in einem neuen Registerkarten-/Fenster statt innerhalb desselben iframes geöffnet wird.
Fügen Sie zusätzlich zur Klasse "widget" dem Widgetcontainer die Klasse "clickable" hinzu.

Ihr Widgetinhalt erhält die richtigen Farben, obwohl sie sich innerhalb eines Ankertags befinden. Ohne die "clickable"-Klasse wird die blaue Standardfarbe für den gesamten Text innerhalb des Widgets erzwungen. Das Widget erhält außerdem einen benutzerdefinierten visuellen Hinweis auf den Fokus, um Benutzern zu helfen, die die Tastatur zum Navigieren im Dashboard verwenden.

Designprinzip: Verwenden Sie die Klasse "Clickable" und das <a> Tag, um das gesamte Widget aufklickbar zu machen. Dies ist ideal, wenn Ihr Widget eine Zusammenfassung der auf einer anderen Seite verfügbaren Daten ist.

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

Befolgen Sie die folgenden Richtlinien, um grundlegende Stile aus dem Widget-SDK für allgemeine Formularelemente in der Widgetkonfiguration zu verwenden:

Form-Element	Wrapping-Element	Leitlinien
Einfaches Textfeld	`div` mit klasse "single-line-text-input".	Verwenden Sie ein `label` Element, um Text neben dem Textfeld hinzuzufügen. Verwenden Sie das `input` Element, um ein Textfeld zu erstellen. Verwenden Sie das `placeholder` Attribut, um Platzhaltertext bereitzustellen.
Kontrollkästchen	`fieldset` mit Klasse "Kontrollkästchen"	Verwenden Sie ein `label` Element, um neben jedem Kontrollkästchen Text hinzuzufügen. Verwenden Sie ein `legend` Element, um die Gruppe von Kontrollkästchen zu beschriften. Verwenden Sie das `for` Attribut für jedes `label` Element, um Bildschirmsprachausgaben das Formularelement zu verstehen.
Optionsfeld	`fieldset` mit Klasse "Radio"	Verwenden Sie ein `label` Element, um Text neben jedem Optionsfeld hinzuzufügen. Verwenden Sie ein `legend` Element, um die Gruppe von Optionsfeldern zu beschriften. Verwenden Sie das `for` Attribut für jedes `label` Element, um Bildschirmsprachausgaben das Formularelement zu verstehen.
Dropdown	`div` mit dem Klassendropdown	Verwenden Sie ein `label` Element, um Text neben der Dropdownliste hinzuzufügen. Wenn eine Dropdownliste die Hälfte der Breite belegt, fügen Sie dem Umbruchelement `div` klasse "halb" hinzu. Wenn Sie das Standardpfeilsymbol aus dem SDK anstelle des vom Browser bereitgestellten Pfeilsymbols verwenden möchten, schließen Sie das `select` Element mit einer anderen `div` mit der Klasse "wrapper" um.
Mehrzeiliges Textfeld	`div` mit Klasse "mehrzeilige Texteingabe".	Verwenden Sie `label` das Element, um das Element zu bezeichnen, das `textarea` als mehrzeiliges Textfeld verwendet wird.

Im folgenden Beispiel werden die einzelnen Formularelemente verwendet, die in der Tabelle aufgeführt sind.

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

Anzeigen von Überprüfungsfehlern unter einem Formularelement

Es wird empfohlen, Validierungsfehler unterhalb der relevanten Formularelemente bereitzustellen. Um diese Nachrichten auf eine Weise anzuzeigen, die mit 1. Party-Widgets konsistent ist, fügen Sie den folgenden Codeausschnitt unter jedem Formularelement hinzu, für das Sie die Fehlermeldung anzeigen möchten.

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

Der vorherige Codeausschnitt hat standardmäßig die Sichtbarkeit ausgeblendet. Wenn Sie eine Fehlermeldung anzeigen möchten, suchen Sie den entsprechenden "Validation-error-text", fügen Sie ihr Text hinzu, und legen Sie ihn auf dem übergeordneten Element fest visibility:visible .

Beispiel: Es gibt ein einfaches Textfeld, in das der Benutzer eine Zeichenfolge eingeben muss. Sie müssen eine Fehlermeldung anzeigen, wenn das Textfeld leer ist.

Der HTML-Code hierfür wäre:

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

Und der JavaScript-Code dahinter wäre:

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

Feedback

War diese Seite hilfreich?

Last updated on 2025-12-17

Freigeben über

Grundlegende Stile für Ihre Widgets

Widgettext, Titel und Beschreibung

Widgettitel und Untertitel

Anzeigen von Links, Symbolen, Text und Untertext in einem Widget

Anzeigen von Leistungsindikatoren in einem Widget

Erstellen eines Widgets als Link

Formatvorlagen für allgemeine Formularelemente in der Widgetkonfiguration

Anzeigen von Überprüfungsfehlern unter einem Formularelement

Feedback

Zusätzliche Ressourcen