Pencere öğeleriniz için temel stiller

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 bloğun içine VSS.require aşağıdaki satırı ekleyin.

İpucu

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 doldurma 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 kodunda bloğun içindeki VSS.require aşağıdaki satırı ekleyin.

	WidgetHelpers.IncludeWidgetConfigurationStyles();

Bu, sdk-widget-configuration.css adına göre bir stil sayfası çeker ve pencere öğesi yapılandırmanız 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.

Not

Bu stillerin pencere öğenize uygulanması için, pencere öğenizi içeren HTML öğesine bir "pencere öğesi" sınıfı eklemeniz gerekir. sdk-widgets.css tüm stillerin kapsamı bu sınıfa göre belirlenmiştir. Benzer şekilde, pencere öğesi yapılandırmanızı içeren HTML öğesine bir "widget-configuration" sınıfı ekleyin. sdk-widget-configuration.css tüm stillerin kapsamı bu sınıfa göre belirlenmiştir.

Uzantı örneğini indirin.

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 kullanın <h2> . Bu, ekran okuyucu kullanan kişilerin panodaki farklı pencere öğelerini hızla tanımlamasına da yardımcı olur.

Tasarım ilkesi: Pencere öğelerinin başlığı olmalıdır. <h2>"title" sınıfıyla etiketini kullanın.

Bazen pencere öğesiniz veya nasıl kullanacağınız 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>

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

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 yazı" 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. Alt başlığın başlığına veya pencere öğesinin geri kalanına göre alt yazı rengi vardır.

	<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, aşağıdaki gibi bir satır içi öğe kullanın: <span>
• Başlıktan sonraki satırda alt yazının görünmesi gerektiğinde, <div>

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

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>

Pencere öğesinde sayaçları görüntüleme

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>

Pencere öğesini köprü yapma

Bazı pencere öğelerinde herhangi bir yere tıklanması kullanıcıyı başka bir sayfaya yönlendirir. Pencere öğesinizin de aynısını yapması için şunları yapabilirsiniz:

• Pencere öğesi kapsayıcınız gibi davranan HTML öğesine alt öğe olarak bir tutturucu 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.

Pencere öğesi içeriğiniz bir tutturucu etiketi içinde olsalar bile doğru renkleri alır. "Tıklanabilir" sınıfı olmadan, varsayılan mavi renk pencere öğesi içindeki tüm metinlerde zorlanır. Pencere öğesi, panoda gezinmek için klavyeyi kullanan kullanıcılara yardımcı olmak için odakta özel bir görsel ipucu da alır.

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 stiller

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	div "single-line-text-input" sınıfıyla.	Metin kutusunun yanına metin eklemek için bir label öğe kullanın. input metin kutusu oluşturmak için öğesini kullanın. placeholder Yer tutucu metin sağlamak için özniteliğini kullanın.
Onay kutusu	fieldset "onay kutusu" sınıfıyla	Her onay kutusunun yanına metin eklemek için bir label öğe kullanın. Onay kutuları grubunu başlık için bir legend öğe kullanın. Ekran okuyucuların for form öğesini anlamasına yardımcı olması için her label öğedeki özniteliğini kullanın.
Radio button	fieldset "radio" sınıfıyla	Her radyo düğmesinin yanına metin eklemek için bir label öğe kullanın. Radyo düğmeleri grubunu başlık için bir legend öğe kullanın. Ekran okuyucuların for form öğesini anlamasına yardımcı olması için her label öğedeki özniteliğini kullanın.
Açılır menü	div "dropdown" sınıfıyla	Açılan listenin yanına metin eklemek için bir label öğe kullanın. Genişliğin yarısını kaplayan bir açılan menü istiyorsanız, sarmalama div öğesine "half" sınıfını ekleyin. Tarayıcı tarafından sağlanan yerine sdk'dan standart ok simgesini kullanmak istiyorsanız, öğesini "wrapper" sınıfıyla başka bir div öğeyle sarmalarsınızselect.
Çok satırlı metin kutusu	div "multi-line-text-input" sınıfıyla.	Çok satırlı metin kutusu olarak kullanılan öğeyi textarea etiketlemek için öğesini kullanınlabel.

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ı sağlamanızı ö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, karşılık gelen "validation-error-text" öğesini bulun, buna metin ekleyin ve üst öğesinde ayarlayın visibility:visible .

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