Araçlarınız için temel stiller

2025-03-26

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Pencere Öğesi SDK'sı aracılığıyla sağlanan temel stilleri kullanmanızı öneririz. Bu stilleri kullanmak, panodaki diğer pencere öğeleriyle tutarlı bir pencere öğesi oluşturmanıza hızlı ve kolay bir şekilde yardımcı olur. Bu stilleri kullanmak için pencere öğesinizin JavaScript kodundaki VSS.require bloğunun içine aşağıdaki satırı ekleyin.

Tavsiye

Azure DevOps Uzantı SDK'sını kullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.

	WidgetHelpers.IncludeWidgetStyles();

Bu, sdk-widget.css adlı bir stil sayfasını çeker ve pencere öğesinizin iframe'ine ekler. Pencere öğeniz için yazı tipi ailesi, yazı tipi boyutu, kenar boşluğu ve dolgu stilleri içerir. Ayrıca başlıklar (h1, h2, h3 vb.), bağlantılar ve daha fazlası için stiller içerir.

Benzer şekilde, pencere öğesi yapılandırmasında ortak stilleri kullanmak için pencere öğesi yapılandırmanız için JavaScript kodundaki VSS.require bloğunun içindeki aşağıdaki satırı ekleyin.

	WidgetHelpers.IncludeWidgetConfigurationStyles();

Bu, sdk-widget-configuration.css adlı bir stil sayfasını alır ve pencere öğesi yapılandırması için iframe'e ekler. Yazı tipi ailesi stilleri, yazı tipi boyutu ve giriş, metin alanı ve seçme gibi yaygın form öğeleri için stiller içerir.

Uyarı

Bu stillerin pencere öğenize uygulanması için, pencere öğenizi içeren HTML öğesine bir "pencere öğesi" sınıfı eklemeniz gerekir. sdk-widgets.css dosyasındaki tüm stiller bu sınıfla sınırlandırılmıştır. Benzer şekilde, pencere öğesi yapılandırmanızı içeren HTML öğesine bir "widget-configuration" sınıfı ekleyin. sdk-widget-configuration.css içindeki tüm stiller bu sınıfla sınırlanmıştır.

uzantısı örneğiniindirin.

Pencere öğesi gövdesi, başlığı ve açıklaması

Pencere öğenizi içeren HTML öğesine "pencere öğesi" sınıfını ekleyerek, pencere öğesi içeriği için otomatik olarak doldurma, yazı tipi ve renk elde edersiniz.

Pencere öğesiniz için her zaman bir başlığınız olmalıdır. Bu, kullanıcının pencere öğesinizi ve işlevselliğini bir bakışta tanımlamasına yardımcı olur. "title" sınıfıyla <h2> kullanın. Bu, ekran okuyucu kullanan kişilerin panodaki farklı pencere öğelerini hızla tanımlamasına da yardımcı olur.

Tasarım ilkesi: Araçların bir başlığı olmalıdır. "title" sınıfıyla <h2> etiketini kullanın.

Bazen widget'ınız veya nasıl kullanıldığı hakkında küçük bir açıklama sağlamak isteyebilirsiniz. Böyle durumlarda, pencere öğesi açıklaması için kullanmak istediğiniz HTML öğesinde "description" sınıfını kullanın.

Tasarım ilkesi: Pencere öğesi açıklaması için "description" sınıfını kullanın. Açıklamalar, pencere öğesi bağlamından okunduğunda bile anlamlı olmalıdır.

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

Alt yazılar başlığı tamamlayan metindir. Başlık okunmadan bağlam dışında okunduğunda her zaman anlamlı olmayabilirler.

Tasarım ilkesi: Pencere öğesi hakkında daha fazla bilgi sağlamak için "alt başlık" sınıfını kullanın. Pencere öğesi bağlamında anlamlı olmayabilir.

Bir başlık ve alt başlık bileşimi için doğru yazı tipini, rengi ve kenar boşluklarını almak için aşağıdaki yapıyı ve "title", "inner-title" ve "subtitle" sınıflarını kullanın. Başlık, alt başlıktan daha büyük bir yazı tipi boyutu alır. Başlığa veya pencere öğesinin geri kalanına kıyasla alt başlığın rengi daha soluk.

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

Başlık ve alt başlık bileşimi için herhangi bir html öğesini kullanabilirsiniz. Bazı ipuçları şunlardır:

Alt başlığın başlıkla aynı satırda görünmesi gerektiğinde, <span> gibi satır içi bir öğe kullanın
Başlıktan sonraki satırda alt yazının görünmesi gerektiğinde, <div> gibi bir blok öğesi kullanın

Bazı pencere öğelerinde, bağlantı başına simge, metin ve alt metin içeren bağlantılar bulunur.

Tasarım ilkesi: Bağlantının amacını kullanıcıya açık hale getirmek için bir simge ve alt metin içeren bağlantıları kullanın. Simgenin bağlantının hedefini simgelediğinden emin olun.

Aynı görünüme sahip olmak için aşağıdaki HTML yapısını ve sınıflarını kullanın.

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

Bazı pencere öğelerinin birincil amacı, bazı verilerin sayısını görüntülemektir. Sorgu Kutucuğu ve Kod Kutucuğu pencere öğeleri, bu pencere öğesi kategorisindeki örneklerdir. Bu pencere öğeleriyle aynı stilleri kullanmak için, Sorgu Kutucuğu ve Kod Kutucuğu pencere öğeleri tarafından kullanılan büyük yazı tipini almak için sayıyı tutan HTML öğesine "big-count" sınıfını ekleyin.

Tasarım ilkesi: Kullanıcıya büyük yazı tipinde sayılar sunmak için "büyük sayı" sınıfını kullanın. Sayısal olmayan karakterlerle kullanılmamalıdır.

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

Bazı pencere öğelerinde herhangi bir yere tıklanması kullanıcıyı başka bir sayfaya yönlendirir. Widget'ınızın aynı şekilde çalışması için şunları yapabilirsiniz:

Widget kapsayıcınız olarak işlev gören HTML öğesine alt öğe olarak bir etiketi ekleyin.

Tüm pencere öğesi içeriğinizi tutturucu etiketine yerleştirin.

Pencere öğeniz bir iframe'de barındırılıyor olduğundan, bağlantının aynı iframe yerine yeni bir sekmede/pencerede açılması için bağlantı etiketine "_blank" değerine sahip "target" özniteliğini ekleyin.

"Pencere öğesi" sınıfına ek olarak, "tıklanabilir" sınıfını pencere öğesi kapsayıcısına ekleyin.

Bileşen içeriğiniz bir bağlantı etiketi içinde bulunsalar bile doğru renkleri alır. "Tıklanabilir" sınıfı olmadan, varsayılan mavi renk pencere öğesi içindeki tüm metinlere otomatik olarak uygulanır. Pencere öğesi, panoda gezinmek için klavyeyi kullanan kullanıcılara yardımcı olmak amacıyla odaklandığında özel bir görsel ipucu da gösterir.

Tasarım ilkesi: Pencere öğesinin tamamını tıklanabilir hale getirmek için "tıklanabilir" sınıfını ve <a> etiketini kullanın. Pencere öğesiniz başka bir sayfada bulunan verilerin özeti olduğunda bu idealdir.

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

Pencere öğesi yapılandırmasında yaygın form öğeleri için pencere öğesi sdk'sından temel stilleri kullanmak için şu yönergeleri izleyin:

Form öğesi	Sarmalama öğesi	Yönergeler
Basit metin kutusu	"single-line-text-input" sınıfıyla `div`.	Metin kutusunun yanına metin eklemek için bir `label` öğesi kullanın. Metin kutusu oluşturmak için `input` öğesini kullanın. Yer tutucu metin sağlamak için `placeholder` özniteliğini kullanın.
Onay kutusu	"onay kutusu" sınıfıyla `fieldset`	Her onay kutusunun yanına metin eklemek için bir `label` öğesi kullanın. Onay kutuları grubuna başlık eklemek için bir `legend` öğesi kullanın. Ekran okuyucuların form öğesini anlamasına yardımcı olmak için her `label` öğesinde `for` özniteliğini kullanın.
Radyo butonu	"`fieldset`, radio sınıfını içeren"	Her radyo düğmesinin yanına metin eklemek için bir `label` öğesi kullanın. Radyo düğmeleri grubuna açıklamalı alt yazı eklemek için bir `legend` öğesi kullanın. Ekran okuyucuların form öğesini anlamasına yardımcı olmak için her `label` öğesinde `for` özniteliğini kullanın.
Açılan Liste	"Açılan liste" sınıfıyla `div`	Açılan listenin yanına metin eklemek için bir `label` öğesi kullanın. Genişliğin yarısını kaplayan bir açılan menü istiyorsanız, sarmalama `div` öğesine "half" sınıfını ekleyin. SDK’dan standart ok simgesini kullanmak istiyorsanız, tarayıcı tarafından sağlanan yerine `select` öğesini "wrapper" sınıfına sahip başka bir `div` ile sarmanız gerekir.
Çok satırlı metin kutusu	`div` "çok satırlı metin girişi" sınıfıyla.	Çok satırlı metin kutusu olarak kullanılan `textarea` öğesini etiketlemek için `label` öğesini kullanın.

Aşağıdaki örnek, tabloda listelenen form öğelerinin her birini kullanır.

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

Form öğesinin altında doğrulama hatalarını görüntüleme

İlgili form öğelerinin altında doğrulama hatalarını göstermenizi öneririz. Bu iletileri birinci taraf pencere öğeleriyle tutarlı bir şekilde görüntülemek için, hata iletisini göstermek istediğiniz her form öğesinin altına aşağıdaki kod parçacığını ekleyin.

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

Önceki kod parçacığında görünürlük varsayılan olarak gizlidir. Bir hata iletisi görüntülemek istediğinizde, ilgili "validation-error-text" öğesini bulun, buna metin ekleyin ve üst öğesinde visibility:visible değerini ayarlayın.

Örnek: Kullanıcının bir dize yazması gereken basit bir metin kutusu vardır. Metin kutusu boşsa bir hata iletisi göstermeniz gerekir.

Bunun html'i şu şekilde olabilir:

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

Bunun arkasındaki JavaScript kodu şu şekilde olacaktır:

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

Aracılığıyla paylaş

Widget yapılandırmasında sık kullanılan form öğeleri için stiller

Form öğesinin altında doğrulama hatalarını görüntüleme

Aracılığıyla paylaş

Araçlarınız için temel stiller

Pencere öğesi gövdesi, başlığı ve açıklaması

Pencere öğesi başlıkları ve alt yazıları

Pencere öğesinde köprüleri, simgeleri, metni ve alt metni görüntüleme

Widget'te sayaçları görüntüleme

Pencere öğesini köprüye dönüştür

Widget yapılandırmasında sık kullanılan form öğeleri için stiller

Form öğesinin altında doğrulama hatalarını görüntüleme

Geri Bildirim

Ek kaynaklar