Bir oda talebi taslağı üzerinden Nord’un Therapy tema belirteçlerini ve Web Component sözleşmelerini inceleyin: gerçek renk rolleri, duyarlı alan boyutları, açık doğrulama ve yerel olarak hazırlanan sonuçlar.
Nord Therapy belirteçlerinin çevrimdışı HTML/CSS yorumu; yerel Web Component entegrasyonu ayrı olarak gösterilmiştir. · Uygulama başvurusu
02
Nord tasarım sistemi Tasarım Başvurusu
Nord tokenları 9.0.4 ve güncel bileşen belgeleri. Aşağıdaki değerler her Nordhealth markasını değil, varsayılan Therapy temasını açıklar. Herkese açık belgeler, Nord’u amaçlanan Nordhealth kapsamı dışında kullanma izni vermez.
Nord tasarım sistemi Nord, herkese açık referansları bulunan bir iç ürün sistemidir
Amaçlanan kullanım kapsamını görünür tutun
Nord’un belgeleri, Nordhealth deneyimleri için oluşturulmuş bir sistemi açıklar. Bileşenleri herkese açık olarak incelenebilir ve yararlı referanslar sunar; ancak bu örnek, markanın veya bileşen terimlerinin ticari amaçlarla sınırsız biçimde yeniden kullanılmasına izin verildiği anlamına gelmez. Buradaki oda adları ve talep iş akışı, özgün örnek verilerdir.
Varsayılan token tablosu Therapy temasını temsil eder. Veterinerlik veya sağlık uygulamaları, mavi vurgunun tüm Nordhealth ürünlerini tanımladığını varsaymak yerine amaçlanan temayı seçmelidir. Tema kararını uygulama düzeyinde tutun.
Nord tasarım sistemi Therapy rolleri çalışma alanını sakin tutar
Metin, kenarlık ve yüzey rollerini birbirinden ayırın
Örnekte talep ayrıntıları için ana metin rolü, açıklamalar içinse daha silik rol kullanılır. Beyaz paneller kırık beyaz sayfa yüzeyinin üzerinde yer alır; daha belirgin bir kenarlık, düzenlenebilir alanları tanımlar. Hata metni, arayüzün tamamını kırmızıya boyamak yerine geçersiz başlığın yanında gösterilir. Önizlemede klinik veya hasta bilgisi bulunmaz.
Nord tasarım sistemi Kompakt metin için yeterli satır aralığı gerekir
Belgelenen punto boyutunu satır yüksekliğiyle birlikte kullanın
Token, 0.875rem gövde metni boyutunu 1.5 gövde satır yüksekliğiyle eşleştirirken form metni için ayrı bir 20px satır kutusu tanımlar. Bunlar farklı kurallardır: form değerini uzun paragraflara uygulamak, satırları gereksiz yere sıkıştırır. Canlı referansta Nordhealth Sans ailesi token’ı kullanılır; bu çevrimdışı yorumlama, lisanslı bir yazı tipinin sağlandığını iddia etmek yerine mevcut sistem yazı tiplerini kullanır.
Nord tasarım sistemi Denetimleri uygulama ızgarasının içinde genişletin
Bileşen, sayfa kırılma noktasını belirlemez
Input başlangıçta 240px inline-size değişkenini kullanır. Mevcut alan sütununu doldurmak için belgelenen yöntem expand kullanmaktır. Örneğimizde oda listesi masaüstünde düzenleyicinin yanında, mobilde ise altında yer alır; bu kırılma noktası Nord token’ı değil, uygulama kararıdır. Bir satır seçildiğinde oda adı, kapasite ve uygunluk etiketi görünür kalır.
Çevrimdışı yorumlamadaki seçili oda listesi, yerel bir radio grubudur. Ayrı olarak sunulan kütüphane örneğinde beş seçenekli bir Select kullanılır. Her ikisi de tek oda seçer; ancak farklı düzenleri gösterir ve çalışma zamanında aynı bileşen uygulamaları olarak sunulmaz.
Nord tasarım sistemi Etiketlerin ve hata mesajlarının sorumluluğunu tek bir yapıya verin
Bu form için bağımsız alanlar yeterlidir
Input veya Select, etiketini, ipucunu ve hatasını kendi içinde sunabilir. Yeni Field bileşimi kullanıldığında bu sorumlulukları devralır; dolayısıyla her iki yapıyı birden yinelemek gereksiz yönergeler oluşturur. Bu örnek bağımsız alan yaklaşımını kullanır ve başlık boşlukları kırpıldıktan sonra boşsa tek bir kısa hata gösterir.
Devre dışı alanlar gönderimden çıkarılır; salt okunur alanlar ise ilgili değerin odaklanabilir ve gönderilebilir kalmasını sağlar. Talebe eklenmesi gerekiyorsa, düzenlemeyi önlemek amacıyla oda tanımlayıcısını devre dışı bırakmayın.
Talep başlığının etiketini görünür tutun.
İpucunu beklenen içerik için kullanın; etiket yerine kullanmayın.
Nord tasarım sistemi Select, standart option öğeleri içerir
Değeri ana bileşenden okuyun
Varsayılan slot, yerel option öğelerini kabul eder. Her odanın sabit bir değeri ve kapasitesini içeren açıklayıcı bir görünür etiketi vardır. change olayı, uygulamaya özeti ana bileşendeki değerden yeniden hesaplamasını bildirir. Bu bileşimde özel bir nord-option etiketi yoktur.
Nord, daha fazla seçenek olduğunda Select’i; birkaç seçeneği doğrudan göstermenin yararlı olduğu durumlarda ise radio düğmelerini önerir. Örnekte beş oda sunulur; çevrimdışı radio düzeni, kapasite farklılıklarını görsel olarak kolayca incelemeyi sağlar.
Nord tasarım sistemi Button varsayılanları form bileşimini etkiler
Eylem, bağlantı ve yüklenme anlamlarını açıkça seçin
Nord Button bileşeninin varsayılan type değeri "submit" olur. Bu nedenle form içindeki ikincil bir önizleme veya sıfırlama benzeri eylemin formu göndermemesi gerekiyorsa type değeri açıkça belirtilmelidir. Bileşene href vermek, sunduğu anlamı bağlantı olarak değiştirir; tıklama işleyicisiyle bağlantıyı taklit etmek yerine bu yöntemi gezinme için kullanın.
Yüklenme durumu, yinelenen etkinleştirmeleri önlerken düğmenin odaklanabilir kalmasını sağlar. Döndürücü, yardımcı teknolojilerden gizlidir; bu nedenle uygulama ilerlemeyi sözcüklerle bildirmelidir. disabled değerini gelişigüzel kullanmayın: kullanılamayan bir eylemin odak ve geri bildirim gereksinimleri, çalışmakta olan bir eyleminkinden farklıdır.
Oda talebi örneği eşzamanlı bir taslak hesaplaması yapar, bu nedenle yüklenme aralığı gerekmez. Ana düğmesi başlığı doğrular ve seçilen odayı okur; bu iki alandan biri düzenlendiğinde eski taslak cümlesi kaldırılır. Yukarıdaki alan ve Select bölümleri, bu girdileri hangi Nord API’lerinin yönettiğini açıklar.
Nord tasarım sistemi Bileşen yöntemlerini çağırmadan önce gerekli CSS öğesini yükleyin
Prototip yükleme ile üretim paketlemesi farklıdır
Resmî hızlı başlangıç, bileşen modülünü CSS çerçevesiyle birlikte kullanır. İkincisi, paylaşılan token’ları ve temel stilleri sağlar. Paketlenmiş bir uygulama için @nordhealth/css ve @nordhealth/components paketlerini yükleyin, CSS öğesini bir kez içe aktarın ve yalnızca kullandığınız bileşen modüllerini içe aktarın. Paket modülleri, yan etki olarak kendi öğelerini kaydeder.
React 19 bu özel öğeleri doğrudan kullanabilir. Eski @nordhealth/react sarmalayıcısı güncel yönergelerde kullanımdan kaldırılmıştır. Sunucu tarafında oluşturma, bileşen shadow DOM’unu içermez; Next.js içe aktarımları bir istemci sınırı gerektirir. Bu entegrasyon sınırlamalarını, bileşen kitaplığı olmadan etkileşimleri çalıştıran çevrimdışı HTML önizlemesinden ayrı değerlendirin.
Bileşen modüllerinden önce çerçeve CSS öğesini yükleyin.
Başlatma sırasında focus çağırmadan önce customElements.whenDefined işleminin tamamlanmasını bekleyin.
Doğrulama ve yerel durum işleyicilerini ekleyin.
Çok sayıda CDN modül isteğine güvenmek yerine üretim bağımlılıklarını paketleyin.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Nord Therapy token’larının çevrimdışı HTML/CSS yorumlaması; yerel Web Component entegrasyonu ayrı olarak gösterilir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
Bu örnekte oda seçenekleri radio düğmeleri olarak sunulur; yerel Nord örneği, standart option öğeleriyle birlikte Select kullanır. Hiçbiri gerçek bir oda ayırtmaz.
Açık doğrulama içeren etiketli oda talebi
Bağımsız nord-input ve nord-select, isteğe bağlı Field ailesini kullanmadan etiket sağlar. Gönderim sırasında bileşen değerleri okunur ve girdi error özelliğine atanır.
Beş oda seçeneği, Select’i kullanışlı ve kompakt bir tercih alanı hâline getirir.
Button varsayılan olarak formu gönderir; bu örnekte type değeri açıkça belirtilir.
Yöntemler kullanılmadan önce özel öğelerin tanımlanması beklenir. Herhangi bir rezervasyon hizmeti çağrılmaz.
04
Nord tasarım sistemi Agent Kurulumu
Uygulamaya Başlangıç Noktası
Yetkili Nordhealth kullanımı için eksiksiz, herkese açık CDN prototipi. Belgelerde şu anda CSS 5.2.4 ve components 5.3.0 belirtiliyor. Üretim ortamında npm paketleri paketlenmelidir; aşağıdaki çevrimdışı görsel yorumlama bu uzak paketleri yüklemez.
Nord Therapy anlamsal rollerini etiketli denetimlerle kullanın. Duyarlı bir uygulama düzeninde alanları genişletin. Kırpılmış talep başlığını doğrulayın, seçilen tek odayı koruyun ve yalnızca yerel bir taslak sonucu gösterin. Gerçek Nordhealth uygulamalarında belgelenen paketleri ve tema kullanım izinlerini gözetin.
05
Nord tasarım sistemi Kaynaklar ve Kapsam
Bağımsız OpenDesign referansı. Nord, kullanım amacının Nordhealth ürünleri olduğunu belirtir. Bu özgün HTML yorumlama bir oda ayırtmaz; marka veya bileşen kullanım hakkı da vermez.
