Partekatu honen bidez:

Estilos básicos para los widgets

Servicios de Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Sugerencia

Para obtener las instrucciones de desarrollo de extensiones más recientes, incluidas las temáticas y la migración desde VSS. SDK, consulte el portal para desarrolladores del SDK de extensión de Azure DevOps.

Use los estilos básicos proporcionados por el SDK de widgets para una apariencia coherente entre los widgets del panel.

Para incluir estilos de widget, llame a WidgetHelpers.IncludeWidgetStyles() durante la inicialización del widget:

WidgetHelpers.IncludeWidgetStyles();

Esto carga sdk-widget.css en el iframe del widget, proporcionando estilos para la familia de fuentes, el tamaño de fuente, los márgenes, los rellenos, los encabezados y los enlaces.

En el caso de los paneles de configuración de widgets, llame a WidgetHelpers.IncludeWidgetConfigurationStyles() en su lugar:

WidgetHelpers.IncludeWidgetConfigurationStyles();

Esto carga sdk-widget-configuration.css, que proporciona estilos para la familia de fuentes, el tamaño de fuente y los elementos de formulario comunes, como input, textareay select.

Nota:

Para que estos estilos se apliquen, agregue una widget clase en el elemento HTML que contiene el widget. Todos los estilos de sdk-widget.css se limitan a esta clase. Del mismo modo, agregue una widget-configuration clase en el elemento que contiene la configuración del widget.

Para obtener un ejemplo de trabajo, consulte el ejemplo de extensión.

Cuerpo del widget, título y descripción

Al agregar la clase en el widget elemento contenedor del widget, obtendrá automáticamente relleno, fuente y color para el contenido del widget.

Incluya siempre un título para el widget para que los usuarios puedan identificar su propósito de un vistazo. Usa <h2> con la clase title. Esto también ayuda a los lectores de pantalla a identificar los diferentes widgets del panel.

Widget con título y descripción

Principio de diseño: Los widgets deben tener un título. Utiliza la etiqueta <h2> con la clase title.

Para agregar una descripción, use la clase description en el elemento que contiene la descripción de su widget.

Principio de diseño: Use la description clase para la descripción del widget. Las descripciones deben tener sentido incluso cuando se leen fuera del contexto 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>

Títulos y subtítulos del widget

Los subtítulos complementan el título y es posible que no tengan sentido cuando se leen fuera del contexto.

Widget con título y subtítulo

Principio de diseño: Use la subtitle clase para proporcionar más información sobre el widget.

Use las titleclases , inner-titley subtitle para obtener la fuente, el color y los márgenes adecuados para una combinación de títulos y subtítulos. El subtítulo tiene un color tenue en relación con el título.

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

Sugerencias para la combinación de títulos y subtítulos:

  • Use un elemento insertado como <span> para que el subtítulo aparezca en la misma línea que el título.
  • Use un elemento de bloque como <div> para que el subtítulo aparezca en una nueva línea.

Algunos widgets incluyen vínculos con un icono, texto y subtexto.

Widget que tiene un vínculo con el icono y el texto

Principio de diseño: Use vínculos con un icono y subtexto para hacer que el propósito del vínculo sea obvio para el usuario. Asegúrese de que el icono simboliza el destino del vínculo.

Para obtener la misma apariencia, use la siguiente estructura y clases 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>

Contadores

En el caso de los widgets que muestran un recuento, agregue la big-count clase en el elemento que contiene el número. Los widgets Icono de consulta y Icono de código usan este mismo estilo.

Widget de contador

Principio de diseño: Use la big-count clase para presentar números en una fuente grande. No lo use con caracteres no numéricos.

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

Widgets en los que se pueden hacer clic

Para hacer que un widget se pueda hacer clic para seleccionarlo en cualquier lugar, vaya a otra página:

  1. Agregue una etiqueta de ancla como elemento secundario del elemento contenedor del widget.
  2. Coloque todo el contenido del widget dentro de la etiqueta de anclaje.
  3. Agregue target="_blank" a la etiqueta de anclaje para que el vínculo se abra en una nueva pestaña.
  4. Agregue la clickable clase al contenedor de widgets.

Sin la clickable clase , el color de vínculo azul predeterminado se aplica a todo el texto dentro del widget. La clickable clase también proporciona un indicador de foco personalizado para la navegación por teclado.

Principio de diseño: Use la clickable clase y la <a> etiqueta para hacer que se pueda hacer clic en todo el widget. Este patrón funciona bien cuando el widget resume los datos disponibles en otra página.

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

Elementos de formulario de configuración

Use las siguientes clases para elementos de formulario comunes en la configuración del widget:

Elemento de formulario Elemento de envoltura Guidelines
Cuadro de texto simple div con la clase "entrada-texto-de-una-línea". Use un label elemento para agregar texto junto al cuadro de texto. Use el input elemento para crear un cuadro de texto. Use el placeholder atributo para proporcionar texto de marcador de posición.
Casilla de verificación fieldset con la clase "checkbox" Use un label elemento para agregar texto junto a cada casilla. Use un legend elemento para subtitular el grupo de casillas. Use el for atributo en cada label elemento para ayudar a los lectores de pantalla a comprender el elemento de formulario.
Botón de radio fieldset con la clase "radio" Use un label elemento para agregar texto junto a cada botón de radio. Use un legend elemento para subtitular el grupo de botones de radio. Use el for atributo en cada label elemento para ayudar a los lectores de pantalla a comprender el elemento de formulario.
Lista desplegable div con la clase "dropdown" Use un label elemento para agregar texto junto a la lista desplegable. Si desea que una lista desplegable ocupe la mitad del ancho, agregue la clase "half" al elemento contenedor div. Si desea usar el icono de flecha estándar del SDK en lugar del proporcionado por el explorador, encapsula el select elemento con otro div con la clase "wrapper".
Cuadro de texto de varias líneas div con la clase "multi-line-text-input". Utiliza el elemento label para etiquetar el elemento textarea utilizado como un cuadro de texto multilínea.

En el ejemplo siguiente se usa cada uno de los elementos de formulario enumerados en la tabla.

Ejemplo de configuración de widgets 

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

Mensajes de error de validación

Para mostrar los errores de validación debajo de los elementos de formulario de una manera coherente con los widgets de primera mano, agregue el siguiente fragmento de código debajo de cada elemento de formulario:

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

La visibilidad está oculta de forma predeterminada. Para mostrar un mensaje de error, busque el elemento correspondiente validation-error-text , establezca su texto y establezca visibility: visible en su elemento primario.

Por ejemplo, para mostrar un error cuando un cuadro de texto está vacío:

Ejemplo de error de configuración del widget

El código html para esto sería:

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

Y 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