Condividi tramite

Stili di base per i widget

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

Suggerimento

Per le linee guida più recenti per lo sviluppo di estensioni, incluse la tematizzazione e la migrazione da VSS.SDK, vedere il portale per sviluppatori di Azure DevOps Extension SDK.

Usare gli stili di base forniti da Widget SDK per un aspetto coerente tra i widget del dashboard.

Per includere gli stili del widget, chiamare WidgetHelpers.IncludeWidgetStyles() durante l'inizializzazione del widget:

WidgetHelpers.IncludeWidgetStyles();

Questo carica sdk-widget.css nell'iframe del widget, fornendo stili per la famiglia di caratteri, le dimensioni del carattere, i margini, il padding, le intestazioni e i collegamenti.

Per i pannelli di configurazione dei widget, chiamare WidgetHelpers.IncludeWidgetConfigurationStyles() invece:

WidgetHelpers.IncludeWidgetConfigurationStyles();

In questo modo viene caricato sdk-widget-configuration.css, che fornisce stili per la famiglia di caratteri, le dimensioni del font e per elementi di modulo comuni come input, textarea e select.

Nota

Per applicare questi stili, aggiungere una widget classe nell'elemento HTML che contiene il widget. Tutti gli stili di sdk-widget.css sono limitati a questa classe. Analogamente, aggiungere una widget-configuration classe sull'elemento che contiene la configurazione del widget.

Per un esempio funzionante, vedere l'esempio di estensione.

Corpo del widget, titolo e descrizione

Aggiungendo la widget classe nell'elemento contenitore del widget, si ottiene automaticamente riempimento, tipo di carattere e colore per il contenuto del widget.

Includere sempre un titolo per il widget in modo che gli utenti possano identificarne lo scopo a colpo d'occhio. Usa la classe title con <h2>. Ciò consente anche alle utilità per la lettura dello schermo di identificare i diversi widget nel dashboard.

Widget con titolo e descrizione

principio di progettazione: i widget devono avere un titolo. Usare il <h2> tag con la title classe .

Per aggiungere una descrizione, usare la description classe sull'elemento che contiene la descrizione del widget.

Principio di progettazione: Usare la description classe per la descrizione del widget. Le descrizioni devono avere senso anche quando vengono lette all'esterno del contesto del widget.

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

Titoli e sottotitoli dei widget

I sottotitoli integrano il titolo e potrebbero non avere senso quando si legge fuori contesto.

Widget con titolo e sottotitolo

Principio di progettazione: Usare la subtitle classe per fornire altre informazioni sul widget.

Usare le titleclassi , inner-titlee subtitle per ottenere il tipo di carattere, il colore e i margini corretti per una combinazione di titolo e sottotitolo. Il sottotitolo ha un colore attenuato rispetto al titolo.

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

Suggerimenti per la combinazione di titolo e sottotitolo:

  • Usare un elemento inline come <span> per visualizzare il sottotitolo nella stessa riga del titolo.
  • Usare un elemento di blocco come <div> per visualizzare il sottotitolo in una nuova riga.

Alcuni widget includono collegamenti con un'icona, un testo e un sottotesto.

Widget con collegamento con icona e testo

principio di progettazione: Usare collegamenti con un'icona e un sottotesto per rendere ovvio lo scopo del collegamento all'utente. Assicurarsi che l'icona simbolizza la destinazione del collegamento.

Per ottenere lo stesso aspetto, usare la struttura e le classi HTML seguenti.

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

Contatori

Per i widget che visualizzano un conteggio, aggiungere la big-count classe sull'elemento che contiene il numero. I widget Riquadro query e Riquadro codice usano lo stesso stile.

widget contatore

Principio di progettazione: Utilizzare la big-count classe per presentare numeri in caratteri di grandi dimensioni. Non usarlo con caratteri non numerici.

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

Widget selezionabili

Per rendere un widget cliccabile in modo che selezionandolo ovunque si venga reindirizzati a un'altra pagina:

  1. Aggiungere un tag di ancoraggio come elemento figlio del contenitore del widget.
  2. Inserire tutto il contenuto del widget all'interno del tag di ancoraggio.
  3. Aggiungere target="_blank" al tag di ancoraggio in modo che il collegamento venga aperto in una nuova scheda.
  4. Aggiungere la clickable classe al contenitore widget.

Senza la clickable classe, il colore di collegamento blu predefinito si applica a tutto il testo all'interno del widget. La clickable classe fornisce anche un indicatore di focus personalizzato per la navigazione tramite tastiera.

Principio di progettazione: Usare la clickable classe e il <a> tag per rendere selezionabile l'intero widget. Questo modello funziona bene quando il widget riepiloga i dati disponibili in un'altra pagina.

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

Elementi del modulo di configurazione

Usare le classi seguenti per gli elementi di modulo comuni nella configurazione del widget:

Elemento Form Elemento di avvolgimento Istruzioni
Casella di testo semplice div con la classe "single-line-text-input". Utilizzare un elemento label per aggiungere testo accanto alla casella di testo. Utilizzare l'elemento input per creare una casella di testo. Usare l'attributo placeholder per fornire testo segnaposto.
Casella di controllo fieldset con la classe "checkbox" Utilizzare un elemento label per aggiungere testo accanto a ogni casella di controllo. Usare un elemento legend per etichettare il gruppo di caselle di controllo. Usare l'attributo for in ogni elemento label per aiutare i lettori di schermo a comprendere l'elemento del modulo.
Pulsante di opzione fieldset con classe CSS "radio" Utilizzare un elemento label per aggiungere testo accanto a ogni radio button. Usare un elemento legend per aggiungere una didascalia al gruppo di pulsanti di opzione. Usare l'attributo for in ogni elemento label per aiutare i lettori di schermo a comprendere l'elemento del modulo.
Menu a discesa div con la classe "dropdown" Usare un elemento label per aggiungere testo accanto all'elenco a discesa. Se si desidera un elenco a discesa che occupa metà della larghezza, aggiungere la classe "metà" all'elemento di wrapping div. Se si vuole usare l'icona a forma di freccia standard dell'SDK anziché quella fornita dal browser, eseguire il wrapping dell'elemento select con un altro div con la classe "wrapper".
Casella di testo a più righe div con la classe "input-testo-multilinea". Utilizzare label elemento per etichettare l'elemento textarea utilizzato come casella di testo a più righe.

Nell'esempio seguente vengono utilizzati tutti gli elementi del modulo elencati nella tabella .

Esempio di per la configurazione del widget

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

Messaggi di errore di convalida

Per visualizzare gli errori di convalida sotto gli elementi del modulo in modo coerente con i widget di prima parte, aggiungere il frammento di codice seguente sotto ogni elemento del modulo:

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

La visibilità è nascosta per impostazione predefinita. Per visualizzare un messaggio di errore, trovare l'elemento corrispondente validation-error-text , impostarne il testo e impostarlo visibility: visible sull'elemento padre.

Ad esempio, per visualizzare un errore quando una casella di testo è vuota:

Esempio di per l'errore di configurazione del widget

Il codice HTML per questo sarà:

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

Ecco 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