Gerçek katkıcı bileşenleri ve açıkça belirtilmiş bir temayı kullanarak bir kamu hizmeti arayüzü oluşturun. Bu örnek, belirteç eşlemesini, veri listesi yapısını ve aynı düzenleme iş akışını kullanan iki özgün temayı göstermek için Utrecht CSS kullanıyor.
Yerel Utrecht CSS 9.0.15 düğme/veri listesi bileşenleri, özgün tema belirteçleri ve uygulama etkileşimi. · Uygulama başvurusu
02
NL tasarım sistemi Tasarım Başvurusu
Katkıda bulunan bileşenlerin somut bir birleşimi: @utrecht/component-library-css 9.0.15. Herkese açık belirteç adları ve sınıflar, kütüphanenin incelenmiş API'leridir; “örnek” olarak işaretlenen sayısal değerler ve renkler ise özgün uygulama ayarlarıdır, evrensel bir NL Design System belirtimi değildir.
NL Design System, birden fazla kuruluştan gelen katkıların birleştirilmesini açıkça desteklerken her kuruluşun kurumsal stilini tasarım belirteçleriyle tanımlar. Bu nedenle benimsemenin pratik birimi, seçilen bileşen uygulamasıyla seçilen temanın birleşimidir. Bu sayfada Utrecht CSS katkı sağlayıcısının uygulaması ve özgün bir tanıtım teması seçilmiştir.
Bu seçim, Utrecht'in her NL Design System bileşeninin kanonik uygulaması olduğunu ileri sürmez. Ulusal bir yazı tipi, mavi renk veya boşluk ölçeği uydurmadan okuyucuya tekrarlanabilir bir yol sunar. Gerçek yerel CSS paketi @utrecht/component-library-css 9.0.15'tir.
Sağlanan tema, herkese açık --utrecht-* özel özelliklerini bir kapsayıcı üzerinde ayarlar. Düğme bu değerleri kullanırken sınıfı bileşenin yapısını belirler. --_utrecht- ile başlayan değişkenler, incelenen CSS içindeki dahili hesaplamalardır; bunları doğrudan değiştirmek uygulamayı uygulama ayrıntılarına bağımlı hâle getirir.
Örnekteki turkuaz #005a5b ve mor #57328c, uygulamaya özgü özgün renklerdir. Bu renkler, bir belediyenin kurumsal kimliğini kopyalamadan markalamanın değiştirilebileceğini gösterir. Her ikisinde de düğme metni beyazdır ve üzerine gelme tonu ayrıca tanımlanmıştır. Hiçbir renk, resmî bir NL Design System belirteç değeri olarak sunulmaz.
css
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
Demo, belge okuma için 18px boyutunda Arial, sans-serif yazı tipini ve 1.6 satır yüksekliğini tanımlar. İlk temada 32px başlık ve 4px köşe yarıçaplı bir düğme; ikinci temada aynı okunaklı gövde yazı boyutu, 8px köşe yarıçapı ve serif bir başlık kullanılır. Bunlar temadaki değişiklikleri bilerek görünür kılar.
Yerel düğmede, belirteci yoksa varsayılan olarak 44px minimum blok boyutu kullanılır. Temamız 48px değerini ve blok/iç satır dolgularını açıkça sağlar. Bu, ekosistemin tamamı için tahmin edilmiş bir boyut değil, uygulamanın seçtiği değere sahip gerçek bir CSS API belirtecidir. Düzen, bu örneğin sağladığı en fazla 56rem içerik genişliğini ve 24px boşlukları kullanır.
Makbuzda .utrecht-data-list sınıfına ve .utrecht-data-list--rows değiştiricisine sahip bir dl kullanılır. Her .utrecht-data-list__item, bir dt anahtarını ve dd değerini bir arada tutar. rows değiştiricisi duyarlı ızgarayı, satır aralıklarını ve kenarlıkları etkinleştirir; bu değiştirici olmadan temel veri listesi bu düzeni etkinleştirmez. Tema yüklenmeden önce de HTML anlamını korur.
Makbuzda teslim alma konumu, referans ve seçilen öğe listelenir. Bu, yinelenen kayıtları içeren bir tablo değildir: her anahtar aynı isteğin farklı bir niteliğini belirtir. Dar ekranlarda anahtar ve değer alt alta gelir. Uygulama, uzun konum etiketlerinin kırpılmadan sığması için satır belirteçlerini ayarlar.
Nitelik adı için dt, mevcut değeri için dd kullanın.
Her anahtar/değer çiftini belgelenmiş öğe sarmalayıcısına yerleştirin.
Sayfanın genişlemesine yol açmamak için tanımlayıcıların ve uzun konum adlarının satır sonlarında bölünmesine izin verin.
.utrecht-button temel bileşeni sağlar; .utrecht-button--primary-action ise birincil görünüm belirteç grubunu seçer. Yerel bir eylem için kullanılan ve çevresindeki formu göndermemesi gereken yerel öğede yine de type=button bulunmalıdır. Uygulama bir düzenleme paneli açana kadar veri listesi salt okunur kalır.
Demodaki Teslim alma konumunu değiştir düğmesi, yerel radyo düğmelerinden oluşan bir fieldset gösterir. Kaydetme işlemi, tanım listesindeki değeri günceller ve yeni konumu kibar bir durum bölgesi aracılığıyla duyurur. İptal etme, kaydedilmiş değeri değiştirmeden paneli kapatır. Bu davranışlar uygulama koduyla sağlanır; yalnızca bir CSS paketi kurmak bunları uygulamaz.
Tema seçici, dış sarmalayıcıdaki data-theme değerini değiştirir. Bileşen sınıfları, kayıt değerleri ve seçili radyo düğmesi korunur. Bu, beyaz etiketli ayrımı somut biçimde gösterir: aynı makbuz ve etkileşim farklı görsel kimlikleri destekleyebilir.
Buradaki tema değiştirme özelliği bir geliştirme demosudur; kamu hizmetlerinin sunması gereken bir ayar değildir. Gerçek birden fazla kuruluşun hizmet verdiği sistemde temayı güvenilir uygulama yapılandırmasından seçin. Tema değerleri uygunluğu, doğrulamayı veya bir durumun anlamını değiştirmemelidir.
Sürümlenmiş bileşen CSS paketini bir kez yükleyin.
İlgili tema belirteçlerini kapsayıcı bir öğeye uygulayın.
Aynı anlamsal bileşen işaretlemesini bu kapsayıcı içinde oluşturun.
Desteklenen her tema için odaklanma, satır kaydırma ve durum renklerini doğrulayın.
NL Design System katkı modeli, katkıların paylaşılan standartlara doğru nasıl ilerlediğini açıklar. Bir bileşenin topluluk deposunda bulunması, her bileşimde üretime hazır olduğunun güvencesi değildir. Seçilen uygulamayı, desteklenen durumları ve güncel olgunluk düzeyini bileşen belgelerinden doğrulayın.
Önizlemede konum seçeneklerinin görünür açıklaması yer alır, kaydedilen sonuç duyurulur ve düzenleme sonrasında odak, işlemi başlatan düğmeye geri döner. Tema değiştirme odağı kaldırmaz. Ekran, yerel radyo düğmelerinin klavye denetimleri ve uygulamanın kendi odak ana hatlarıyla kullanılabilir durumda kalır. Bu kontroller, katkı sağlayıcının bileşen testlerini tamamlar; onların yerini almaz.
Doğrulanmış CSS paketini kurup dist/index.css dosyasını CSS destekli bir paketleyici aracılığıyla içe aktarın, ardından tema stil sayfanızı ekleyin. Burada kullanılan yalnızca CSS veri listesi ve düğme için React sağlayıcısı veya JavaScript bileşen başlatıcısı gerekmez. Özgün uygulama betiği düzenleme, kaydetme, iptal etme ve tema değiştirme işlemlerini yönetir.
Paketlenmiş bileşen kaynağı EUPL-1.2 lisansına sahiptir. Dağıtırken kaynak ve lisans bildirimlerini koruyun; kod lisansının bir belediyenin logosunu yeniden kullanma izni verdiğini varsaymayın. Bu örnekte bilerek özgün temalar kullanılmış ve hiçbir belediye işareti eklenmemiştir.
Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>
Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.
Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.
04
NL tasarım sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Bağımsız önizleme, aynı sürümlenmiş yerel CSS bileşenini yükler. Yalnızca CSS kullanan düğme/veri listesi bileşenleri için React sağlayıcısı gerekmez. Kütüphaneyle birlikte özgün tema değerleri de sağlanmalıdır. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP'i, önizleme için gereken tam bağımlılıkları ve belgenin tamamını da içerir. ZIP'i çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/nl-design-system.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
Projeniz İçin Bir İstem
Ajan İstemi
Makbuz tanım listesi ve birincil düğme için @utrecht/component-library-css 9.0.15 kullanın. Herkese açık --utrecht-* belirteçleriyle kapsayıcı kapsamlı özgün bir tema sağlayın; dahili --_utrecht-* değişkenlerine dokunmayın. Etiketli radyo seçenekleriyle konum düzenleme, kaydetme/iptal etme, kibar bir güncelleme duyurusu ve odağın geri dönmesini sağlayın. Bileşen işaretlemesini değiştirmeden veya verileri kaybetmeden ikinci bir özgün tema gösterin. Tüm sayısal tema değerlerinin uygulama tercihi olduğunu belirtin.
05
NL tasarım sistemi Kaynaklar ve Kapsam
NL Design System, markadan bağımsız bir ekosistemdir. Bu eğitim örneğinde tek bir katkı sağlayıcı uygulaması ve iki özgün tema seçilmiştir; ulusal bir görsel stil iddiasında bulunmaz ve herhangi bir belediyenin kimliğini kullanmaz.
