VA’nın anlamsal belirteçleri ve yerel Process List bileşeniyle anlaşılır hizmet akışları oluşturun: görünür adım açıklamaları, anlamlı durum etiketleri ve ana akışı okunaklı tutan ek ayrıntılar.
Yerel VA web-components 24.14.0 (component-library 56.14.0 bağımlılığı) ve css-library 0.36.1 tokenları; özgün senaryo denetleyicisi ve yedek yazı tipleri. · Uygulama başvurusu
02
VA tasarım sistemi Tasarım Referansı
Yayımlanmış css-library 0.36.1 değişkenleri ve component-library 56.14.0 bağımlılığı olan web-components 24.14.0. Yazı tipleri için yerel yedekler açıkça belirtilmiştir. 52rem’lik örnek kabuk, uygulamaya özgü bir tercihtir.
VA tasarım sistemi Gaziler için bir hizmet sistemi
Temeller ve bileşenler ayrı paketlerdir
VA sistemi; hizmet örüntülerini, içerik yönergelerini, tokenları, CSS yardımcı programlarını ve Web Components bileşenlerini bir araya getirir. Belgelenen kurulumda genel temeller için CSS-library paketi, etkileşimli öğeler içinse component-library paketi kullanılır. Bu referansta component-library 56.14.0 ile css-library 0.36.1 birlikte kullanılır; bu paketlerin sürüm numaraları birbirinden bağımsızdır.
Örnek, kayıt talebini açıklayan kurgusal bir senaryodur. Bir süreç listesinin, talebin gönderildiğini veya kişinin bir yardımdan yararlanmaya uygun olduğunu ileri sürmeden ilerlemeyi nasıl gösterebileceğini anlatır. VA logosu, resmî kurum kimliği bandı, kişisel kayıt veya gerçek bir vaka durumu gösterilmez. Üretim ortamında kullanılacak hizmet metinleri, ilgili VA programından sorumlu birimle doğrulanmalıdır.
Gövde ve başlık yazı tipi aileleri bilinçli olarak farklı seçilmiştir
Anlamsal başlık ailesi Bitter’dir; yedek olarak Georgia ve diğer serif yazı tipleri kullanılır. Gövde yazı tipi yığını Source Sans Pro Web ve Source Sans Pro ile başlar, ardından platformun sans-serif yedek yazı tipleri gelir. Varsayılan gövde rolü 1.06rem’dir; 16px kök boyutunda yaklaşık 17px eder. Başlıklarda 1. düzey için 40px, 2. düzey için 32px, 3. düzey için 20px ve 4. düzey için yaklaşık 17px kullanılır.
Eski source-sans-normalized adı yerine --vads-font-size-body-default kullanın. Anlamsal token rolü belirtirken eski normalizasyon adı yazı tipinin uygulama ayrıntısını gösterir. Önizlemede gövde metni için açıkça Arial, başlıklar içinse Georgia kullanılır. Yerel Process List bileşeni CSS kendi iç yapısını ve boyutlarını belirler; yedek yazı tipleri, Source Sans ve Bitter’ın ölçülerini birebir yeniden ürettiği iddiasında değildir.
Varsayılan paragraf satır yüksekliği 1.5, başlık satır yüksekliği ise 1.2’dir. Giriş metni rolünde bu değer 1.75’tir. Serif satır yüksekliği tokenı 1.9’dur ve her serif başlık için değil, serif yazı tipiyle dizilen sürekli metinler için tasarlanmıştır. 1.9 değerini kompakt bir süreç başlığına atamak, birbirinden ayrı iki rolü karıştırır. Bu örnekte süreç öğeleri, sayfanın 2. düzey bölüm başlığının altında 3. düzey başlık kullanır.
Sıradan bir yığınla form yığınını birbirinden ayırın
Genel dikey yığın varsayılanı 1rem/16px, formlar için dikey yığın varsayılanı ise 2rem/32px’tir. Bu fark işlevseldir: iki kısa açıklama öğesinin aralığı, etiketleri, ipuçları, denetimleri ve hata mesajları bulunan ayrı soruların aralığından farklı olmalıdır. s, m ve l iç boşlukları sırasıyla 16, 24 ve 32px değerlerine karşılık gelir.
Temel aralık ailesinde 4, 8, 12, 16, 20 ve 24px değerleri, daha büyük sekiz piksellik artışlar ve ayrıca bir ve iki piksellik özel değerler bulunur. Amaçları düzenle eşleştiğinde anlamsal aralık adlarını tercih edin. Örnekteki 52rem’lik dış kabuk, uygulamaya özgü bir tercihtir; 24px iç boşluk ve 32px bölüm aralığı ise yayımlanmış ölçek değerlerini kullanır. Bu kabuk, tüm VA sayfa şablonlarına dayatılmaz.
VA tasarım sistemi Renkler ve duyarlı tasarım tokenları
Geçmişten kalan bir diğer ad yerine rolü kullanın
Güncel metin tokenı --vads-color-text (#1b1b1b) değerindedir. --vads-color-link #005ea2, etkin bağlantı rolü ise #0b4778 değerindedir; bunlar daha koyu birincil renk ailesindeki tüm değerlerle aynı değildir. Hata rolünün değeri #d54309’dur. İkincil kırmızı ailesi bu amaçla kullanıldığında eski kabul edilir; bu nedenle yeni bir doğrulama stili ikincil renk yerine hata anlambilimine başvurmalıdır.
Temel ve anlamsal tablolar, adı belirtilmiş bir CSS-library sürümünden oluşturulur. Örnekte, eski bir USWDS renk paleti kopyalanıp VA paletiymiş gibi sunulmaz; gerçek değişkenler yüklenir. Yerel bileşenlerin bu değişkenlere ek olarak kendi derlenmiş değerleri de olabilir. Yükseltme yaparken her iki katmanı da doğrulayın.
VA’nın Process List bileşeni, metro haritasına da benzetilir. Uzun bir süreci açıklar veya kişinin süreçte hangi noktada olduğunu bildirir. Yönergeler, üç ila on adım kullanılmasını ve sayfada bu türden yalnızca bir liste bulunmasını önerir. Her öğede, fiille başlayan kısa bir başlık ve görünür bir açıklama içeriği bulunmalıdır; bileşen, içi boş bir başlığın yanındaki dekoratif bir sayıdan ibaret değildir.
Yerel etiketler va-process-list ve va-process-list-item şeklindedir. Bir öğe header ve level özelliklerinin yanı sıra active, pending, checkmark ve status-text özelliklerini alır. Yayımlanmış bileşen modülünde öncelik sırası checkmark, active ve ardından pending şeklindedir. Bu durumlardan birini ayarlarken diğer boole durumlarını kapatarak çelişkili birleşimlerden kaçının. Durum stiliyle birlikte açık durum metni kullanın; böylece aşamanın ne olduğu yalnızca renge bakmadan anlaşılır.
html
<va-process-list>
<va-process-list-item header="Prepare your request" level="3"
checkmark="true" status-text="Complete">
<p>Identify the record you need and the office that holds it.</p>
<va-details label="What information helps identify a record?">
<p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
</va-details>
</va-process-list-item>
<va-process-list-item header="Send the request" level="3"
active="true" status-text="Active">
<p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
</va-process-list-item>
<va-process-list-item header="Read the response" level="3"
pending="true" status-text="Pending">
<p>A real service should explain where a response appears and how to ask about missing information.</p>
</va-process-list-item>
</va-process-list>
VA tasarım sistemi Ayrıntılar, görünür bir adımı destekler
Her adımı akordeona dönüştürmeyin
Süreç yönergeleri, akordeon başlığının süreç adımıyla birleştirilmesini uygun bulmaz. Tüm açıklamaları gizlemek, süreci görünür kılma amacını boşa çıkarır. Bununla birlikte, bir adım içinde ek bilgiler için Details bileşeni kullanılabilir. Örnekte kayıt tanımlama açıklaması görünür tutulur; isteğe bağlı ek açıklama ise va-details bileşenine yerleştirilir.
Bileşenin label niteliği, açılır bölümün görünür sorusunu belirler. Kısa bir soru, okuyuculara gizli içeriğin kendileriyle ilgili olup olmadığını söylediğinden More information ifadesinden daha kullanışlıdır. Bu örnekte ayrıntılar, bir kaydı tanımlamaya hangi bilgilerin yardımcı olabileceğini açıklar ve bunların belirli bir VA prosedürüne yönelik talimatlar değil, örnek amaçlı içerik tercihleri olduğu açıkça belirtilir.
Beklemede olarak işaretlenenler de dahil olmak üzere her aşamanın özetini görünür tutun.
Bir aşama içindeki ikincil bir açıklama için yalnızca Details açılır bölümünü kullanın.
Bir sonraki gerçek hizmet eylemini, başlığı denetime dönüştürmek yerine süreç başlığının dışında tutun.
Önizlemedeki Example stage seçicisi, bileşen örneğini hazırlık, gönderim ve yanıtı inceleme aşamaları arasında değiştirir. Gerçek bir talebi ilerletmez, resmî işlem süresi tahmininde bulunmaz veya kullanıcının bir düğmeye tıklamasından tamamlanma durumu çıkarmaz. Canlı bir hizmet, doğrulanmış arka uç durumunu bu görsel durumlarla eşleştirmeli ve gecikmelerin anlamını ayrıca açıklamalıdır.
Seçiciyi değiştirdiğinizde önceki aşamalar Complete, seçili aşama Active, sonraki aşamalar ise Pending olur. Canlı bir durum cümlesi, örnek durum değişikliğini duyurur. Üç aşamanın açıklaması da görünür kalır ve isteğe bağlı Details durumu korunur. Sıfırlama, ilk örnek aşamaya döner ve ek açıklama bölümünü kapatır.
VA tasarım sistemi Yerel Web Components bileşenlerini yükleyin
Bir kez kaydedin ve bağımlılıkları koruyun
Belgelenen paketleyici yolu main.css dosyasını içe aktarır ve component-library paketinden defineCustomElements işlevini çağırır. Yazı tipleri CSS-library paketinden gelir ve ayrı olarak sunulur. Simge sprite’ını kullanan bileşenler, varsayılan olarak /img/sprite.svg olan, aynı kaynaklı bir sprite yolu gerektirir. Bunlar isteğe bağlı görsel iyileştirmeler değil, dağıtımdan sonra keşfedilmemesi gereken gerçek entegrasyon gereksinimleridir.
Bağımsız örnek; web-components 24.14.0 paketinin resmî tarayıcı ESM giriş noktasını, component-library 56.14.0 paketinin bildirdiği bağımlılığı ve Process List, Process List Item ve Details bileşenleri için ilgili tembel yükleme modüllerini kullanır. Uygulama betiği yalnızca örnek durumları seçer. Details denetimi de dahil olmak üzere yerel özel öğe davranışını tarayıcı çalışma zamanı sağlar.
Eşleşen token CSS dosyasını ve tarayıcı bileşenlerinin giriş noktasını yükleyin; göreli modül konumlarını koruyun.
Örnek durum özelliklerini atamadan önce va-process-list-item bileşeninin tanımlanmasını bekleyin.
Tüm senaryo durumlarını, Details klavye kontrolünü ve dar ekran genişliklerini açıklayıcı içeriği gizlemeden test edin.
Gerçek Web Component öznitelikleri ve bir adım içinde kullanılmasına izin verilen Details açılır bölümü.
html
<va-process-list>
<va-process-list-item header="Prepare your request" level="3"
checkmark="true" status-text="Complete">
<p>Identify the record you need and the office that holds it.</p>
<va-details label="What information helps identify a record?">
<p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
</va-details>
</va-process-list-item>
<va-process-list-item header="Send the request" level="3"
active="true" status-text="Active">
<p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
</va-process-list-item>
<va-process-list-item header="Read the response" level="3"
pending="true" status-text="Pending">
<p>A real service should explain where a response appears and how to ask about missing information.</p>
</va-process-list-item>
</va-process-list>
Adım başlıklarını akordeon tetikleyicileriyle değiştirmeyin.
Her öğede yalnızca tek bir durum işareti ayarlanmalıdır.
Eksiksiz bağımsız örnek
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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Request journey — VA component specimen</title><link rel="stylesheet" href="vendor/va-56.14.0/variables.css"><style>*{box-sizing:border-box}:root{--font-serif:Georgia,serif;--font-sans:Arial,sans-serif;--vads-font-family-heading:Georgia,serif;--vads-font-family-serif:Georgia,serif;--vads-font-family-sans:Arial,sans-serif}body{margin:0;font:1.06rem/1.5 Arial,sans-serif;color:var(--vads-color-text);border-top:8px solid var(--vads-color-primary-darker)}main{max-width:52rem;margin:auto;padding:32px 24px}h1,h2{font-family:Georgia,serif;line-height:1.2}h1{font-size:40px;margin:16px 0 24px}h2{font-size:32px;margin:32px 0 24px}.controls{padding:24px;background:var(--vads-color-base-lightest);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:32px 0}label{font-weight:bold}select,button{font:inherit;padding:8px 12px;max-width:100%;background:white;color:var(--vads-color-text);border:1px solid var(--vads-color-base-dark)}button{cursor:pointer;color:var(--vads-color-link)}select:focus-visible,button:focus-visible{outline:3px solid #ffbe2e;outline-offset:3px}va-process-list-item,va-process-list-item *,va-process-list-item::before{font-family:Arial,sans-serif!important}va-process-list-item .usa-process-list__heading{font-family:Georgia,serif!important}va-process-list-item p{margin:8px 0 16px}footer{border-top:1px solid #dfe1e2;padding-top:24px;margin-top:32px}.note{background:#e7f6f8;padding:16px;border-left:4px solid #005ea2}#state{font-weight:bold}@media(max-width:479px){h1{font-size:32px}.controls{padding:16px;align-items:flex-start;flex-direction:column}}</style></head><body><main><p>VA native component example</p><h1>Understand a request journey</h1><p>See how a service can explain preparation, sending a request, and reviewing its response.</p><p class="note">Fictional process for design exploration. These are not VA submission instructions or a real case status.</p><div class="controls"><label for="stage">Example stage</label><select id="stage"><option value="0">Preparing a request</option><option value="1">Sending a request</option><option value="2">Reviewing a response</option></select><button id="reset" type="button">Reset example</button></div><p id="state" role="status">Example: preparing a request.</p><h2>The three stages</h2><va-process-list>
<va-process-list-item header="Prepare your request" level="3"
checkmark="true" status-text="Complete">
<p>Identify the record you need and the office that holds it.</p>
<va-details label="What information helps identify a record?">
<p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
</va-details>
</va-process-list-item>
<va-process-list-item header="Send the request" level="3"
active="true" status-text="Active">
<p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
</va-process-list-item>
<va-process-list-item header="Read the response" level="3"
pending="true" status-text="Pending">
<p>A real service should explain where a response appears and how to ask about missing information.</p>
</va-process-list-item>
</va-process-list><footer>Native VA Web Components 24.14.0 · CSS tokens 0.36.1<br>Arial and Georgia fallbacks. No request is sent or stored.</footer></main><script>globalThis.getVaIconSpriteLocation=()=>new URL("vendor/va-web-24.14.0/sprite.svg",document.baseURI).pathname;</script><script type="module" src="vendor/va-web-24.14.0/component-library.esm.js"></script><script type="module">await customElements.whenDefined('va-process-list-item');const items=[...document.querySelectorAll('va-process-list-item')],select=document.querySelector('#stage');function render(){const current=Number(select.value);items.forEach((item,i)=>{for(const [key,on] of Object.entries({active:i===current,pending:i>current,checkmark:i<current})){item[key]=on;if(on)item.setAttribute(key,'true');else item.removeAttribute(key)}item.statusText=i<current?'Complete':i===current?'Active':'Pending';item.setAttribute('status-text',item.statusText)});document.querySelector('#state').textContent='Example: '+select.selectedOptions[0].textContent.toLowerCase()+'.'}select.addEventListener('change',render);document.querySelector('#reset').addEventListener('click',()=>{select.value='0';render();const detail=document.querySelector('va-details');if(detail.shadowRoot){if(detail.shadowRoot.querySelector('details').open)detail.shadowRoot.querySelector('summary').click()}select.focus()});render();</script></body></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
VA tasarım sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Paket sürümleri doğrulanmış, belgeye alınmış derleyici başlatma yöntemi. Bağımsız tarayıcı örneğinde, React derlemesi yerine buna karşılık gelen yerel web bileşenleri ESM dağıtımı kullanılır. Kaynaklar bölümündeki çalışır durumdaki örneğin tam ZIP paketi, önizleme için gereken tam bağımlılıkları ve belgeyi de içerir. Paketi çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/va.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.
JavaScript
// Install in an application with a JavaScript bundler:
// npm install @department-of-veterans-affairs/[email protected] \
// @department-of-veterans-affairs/[email protected]
import '@department-of-veterans-affairs/component-library/dist/main.css';
import '@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css';
import { defineCustomElements } from '@department-of-veterans-affairs/component-library';
defineCustomElements();
// Render the va-process-list markup in your page after this initialization.
// Deliver the CSS-library fonts separately, or choose an explicit fallback.
// Components that use va-icon also require the same-origin /img/sprite.svg.
Projeniz İçin Bir İstem
Ajan İstemi
Üç ila on adet va-process-list-item öğesi içeren bir va-process-list ile VA hizmet sürecine dair bir açıklama oluşturun. Fiille başlayan başlıklar, bir h2 başlığının altında level=3, görünür açıklamalar ve her öğe için açık status-text ile belirtilen tek bir etkin/beklemede/onay işareti durumu kullanın. va-details öğesini yalnızca adım içindeki ek metinler için kullanın; adımın tamamını gizlemek için kullanmayın. Güncel VADS CSS belirteç dosyasını içe aktarın ve yerel bileşenleri kaydedin. 17px gövde metnini, Bitter/Source Sans yazı tipi ailesi rollerini, anlamsal aralıkları ve 320/480/640/880/1024/1201/1400px sınırlarını koruyun. Etkileşimli her örnekte aşamaların açıklama amaçlı olduğu belirtilmeli ve gönderilmiş bir VA başvurusu izlenimi verilmemelidir.
05
VA tasarım sistemi Kaynaklar ve Kapsam
Kurgusal kayıt talebi aşamalarını gösteren teknik bileşen tanıtımı. Gerçek bir VA talebi, vaka durumu, sosyal yardım kararı veya kurumsal onay söz konusu değildir.
