Designsystemet Tasarım Sistemi.

Designsystemet Tasarım Sistemi Davranışı, CSS ve Tema Paketleri

Üç parçayı doğru sırayla yükleyin

Designsystemet, çerçeveden bağımsız davranışı, bileşen CSS'ini ve tema değerlerini birbirinden ayırır. Bu örnekte designsystemet-web ve designsystemet-css 1.23.0 sürümlerine sabitlenir; önce CSS, ardından varsayılan tema içe aktarılır ve davranış bir kez kaydedilir. Davranış paketi olmadan biçimlendirilmiş bir alan, burada gösterilen bağlantılı ds-field ile aynı uygulama değildir.

Güncel yalın HTML sözleşmesini kullanın

Örnekte normal input, textarea ve select öğeleri ds-input sınıflarıyla birlikte ds-field içine yerleştirilir. Böylece yerel form denetimleri korunurken paket etiketlerle açıklamaları ilişkilendirir. Eski, yalnızca React kullanan bir alan API'i kopyalanmaz. Tam kaynak, doğru paket içe aktarımlarını ve özgün uygulamanın gözden geçirme mantığını içerir.

Designsystemet Tasarım Sistemi Renk Şeması ve Boyut Kipleri

Görünümü veri öznitelikleriyle değiştirin

Sayfanın kök öğesinde data-color-scheme değeri light veya dark olarak ayarlanır. Tema, buna karşılık gelen anlamsal renkleri sağlar; form değerleri ise değişmeden kalır. Parametre tablosunda varsayılan açık kip değerleri açıkça belirtilir; aynı onaltılık renklerin koyu kipte de geçerli olduğu iddia edilmez. İkincil görünüm düğmesinin etiketi, sırada gerçekleşecek eylemi açıklar.

Boyut kipinin tüm sistemi etkilemesini sağlayın

Okuma boyutu denetimi, data-size değerini sm, md ve lg arasında değiştirir. Böylece yalnızca başlık yakınlaştırılmaz; temanın boyut kipi değiştirilir. Yayımlanan kip katsayıları 1, 1.125 ve 1.3125'tir; bunlar belirteç formüllerinde kullanılır ve bir denetimin bu piksel değerlerine ayarlanması gerektiğine dair genel bir talimat değildir. Örnekte büyük kip hem telefon genişliğinde hem masaüstünde test edilir.

Designsystemet Tasarım Sistemi Inter ve Anlamsal Tipografi

Gereken kalınlıkları ekleyin

Önizleme, Inter 400, 500 ve 600 kalınlıklarını pakete ekler ve küçük l harfinin biçimi için belgelenen cv05 yazı tipi özelliğini etkinleştirir. Sayfada, yazı tipi kalınlığı ve satır yüksekliğinin temaya uyması için yerel başlık ve paragraf sınıfları kullanılır. Sabit 14px boyutundaki açıklama, ana etkileşim ölçeğinin dışında olduğu açıkça belirtilen, yazar tarafından eklenmiş yardımcı bir nottur.

Yardımcı içeriği ilgili denetimin yanında tutun

Başlık ipucu, etiketin amacını açıklar; sonuç ipucu ise beklenen içerik türünü belirtir. İpuçları denetimlerinin yanında kalır ve ds-field aracılığıyla ilişkilendirilir. Yardımcı yönlendirme ayrı bir kartta yer alır; dar ekranlarda bu kart formu izler. Talimatları göstermek için üzerine gelme etkileşimine güvenilmez.

Designsystemet Tasarım Sistemi Otomatik İlişkilendirmeler ve Karakter Geri Bildirimi

ds-field'in tek bir denetimi ilişkilendirmesini sağlayın

Her ds-field, input benzeri tek bir denetim, etiketini ve isteğe bağlı data-field açıklamalarını içerir. Paket kimlikleri atar ve etiket/açıklama ilişkilerini kurar. İlişkisiz denetimleri tek bir ds-field içinde gruplamak, bu otomatik sözleşmenin belirsizleşmesine yol açar. Bu sarmalayıcının genel amaçlı bir form kapsayıcısı olduğunu varsaymak yerine gruplar için fieldset kullanın.

• Her ds-field içinde input benzeri tek bir denetim bulundurun.
• İlişkili yardımcı içerik için data-field açıklamalarını kullanın.
• Kimlikleri ve aria-describedby ilişkilerini yerel gözlemcinin yönetmesini sağlayın.

Sayacın neyi ölçtüğünü anlayın

Designsystemet Tasarım Sistemi Uygulama Doğrulaması ve Gözden Geçirme Durumu

Yazım görevini ayrı doğrulayın

Uygulama, görev başlığı ve sonuç alanlarının boş olmamasını zorunlu tutar; ayrıca örnek sınırını aşan sonuçları reddeder. İşlem yapılabilir bir mesaj gösterdikten sonra ilgili alana odaklanır. Yerel sayaç uzunluk hakkında bilgi verirken gönderim işleyicisi yerel gözden geçirme kuralını uygular. maxlength, yapıştırılan metni sessizce kırpıp silmez.

Sunumu değiştirirken verileri koruyun

Gözden geçirme başarıyla tamamlandığında geçerli başlık ve sonuç metin olarak gösterilir. Bu alanlardan biri düzenlenirse sonuç temizlenir; görünüm veya boyut değiştirildiğinde ise brief değişmediğinden sonuç korunur. Bu ayrım bilinçli olarak yapılmış ve doğrulanmıştır. Hiçbir veri proje yönetimi hizmetine gönderilmez; önizleme hiçbir zaman harici bir görevin oluşturulduğunu iddia etmez.

Designsystemet Tasarım Sistemi Eksiksiz Yerel Alan Uygulaması

Sürümlenmiş örneği yeniden oluşturun

Bir Vite vanilla projesi oluşturun, sabitlenmiş iki Designsystemet paketini ve Inter'i yükleyin, ardından eksiksiz giriş dosyasını ve digdir.css dosyasını kaydedin. Kök bağlama öğesini koruyun. Kaynak; kaydı, tema sırasını, sayaç işaretlemesini, sunum denetimlerini ve gözden geçirme doğrulamasına ilişkin tüm geçişleri içerir. Yerel önizlemede el yapımı bir taklit yerine aynı yerel alan gözlemcisi kullanılır.

1. Davranışı bir kez, ardından bileşen CSS'ini ve varsayılan temayı içe aktarın.
2. Inter 400, 500 ve 600 kalınlıklarını yükleyip giriş dosyasının/CSS'in tamamını kaydedin.
3. Sınırı aşan sayacı deneyin ve sonucu düzeltin.
4. Gözden geçirin, boyutu ve görünümü değiştirin, ardından sonucu temizlemek için metni düzenleyin.

Sınır aşımı ve sonrasında düzelme davranışını test edin

Sonuç alanına 150 normal karakter yapıştırın ve sınırın on karakter aşıldığının bildirildiğini doğrulayın. Gözden geçirme bu metni reddetmelidir. Metni kısa bir sonuçla değiştirip gözden geçirmeyi başarıyla tamamlayın; ardından sonucu kaybetmeden koyu kipi ve okuma boyutunu değiştirin. Başlığı düzenleyip eski gözden geçirme sonucunun temizlendiğini doğrulayın. Her görüntü alanı genişliğinde görünür odağı ve metnin satırlara doğru bölünmesini kontrol edin.

Designsystemet Tasarım Sistemi Bileşen Örnekleri

import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});

body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}}