AgDS’nin somut boşluk değerleri, duyarlı özellikleri ve TaskList durum modeliyle daha uzun hizmet işlemleri oluşturun. İnceleme adımının yalnızca ön koşullar tamamlandığında açıldığı bir hazırlık iş akışını deneyin.
AgDS belirteç değerlerinin ve TaskList durum anlamlarının HTML/CSS/JS ile özgün yorumu; yerel React işleme değildir. · Uygulama başvurusu
02
Agriculture tasarım sistemi Tasarım Referansı
AgDS resmî belirteç/bileşen belgeleri ve @ag.ds-next/react 1.35.4 meta verileri. Önizleme, belgelenmiş HTML/CSS yorumudur; gerçek React içe aktarımları ayrıca sağlanır.
AgDS, Emotion ile stillendirilen bir React kütüphanesidir. Core, uygulamayı sarar ve sıfırlama stillerini, CSS değişkenlerini ve tema yapılandırmasını sağlar. Seçilen tema içe aktarımı @ag.ds-next/react/ag-branding içinden gelir; Core’dan ayrıdır ve her bileşene eklenen uydurma bir sağlayıcı özelliği değildir.
Bağımsız örnek, belgelenmiş belirteçlerin ve görev durumlarının açıkça belirtilmiş bir HTML/CSS yorumudur. React kütüphanesini çalıştırdığını iddia etmez. Durum makinesi, bağımlılık davranışını incelemek için kullanışlıdır; eksiksiz React örneği ise uygulama için gerçek bileşen yolunu sunar.
Agriculture tasarım sistemi Sistem yazı tipleri ve ölçeği
Yazı tipi indirmeden okunabilir
AgDS; platform arayüzü yazı tipi, Helvetica ve Arial yedeklerini içeren bir sistem yazı tipi yığını kullanır. Belgelenmiş yazı tipi ölçeği xs 14px, sm 16px, md 20px ve lg 24px değerlerinden oluşur. Daha büyük roller mobilde değişir: xl 28→32px, xxl 32→40px ve xxxl 40→48px.
Satır yükseklikleri, tipografi altyapısı boyunca 4px ızgarasına hizalanır. Her yazı tipi için gelişigüzel bir oran çarpmak yerine bileşenin fontSize ve lineHeight rollerini kullanın. Önizlemede sm gövde boyutu, mobilde 32px ve daha geniş görünüm alanlarında 40px başlık kullanılır; yazı tipi indirilmez.
Agriculture tasarım sistemi Aralık ve duyarlı özellikler
Sayılar rem tabanlı belirteçleri ifade eder
AgDS’de 1.5 aralık değeri, standart kök boyutunda 24px anlamına gelir; 1.5px anlamına gelmez. Belgelenmiş aralık dizisi 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px ve 3=48px değerlerini içerir. FormStack alanlar arasındaki boşluk için 2’yi, daha büyük alan kümeleri ise 3’ü kullanır.
Duyarlı özellikler, adlandırılmış kesme noktası nesnelerini kabul eder. Box padding={{xs:1,md:3}} değeri 16px ile başlar ve 768px’te 48px’e çıkar. Atlanmış ara anahtarlar, önceki değeri devralır. Bu yaklaşım, birbirinden bağımsız CSS geçersiz kılmalar dizisinden daha açıktır.
Agriculture tasarım sistemi Ön plan rengi arka plana göre belirlenir
Açık ve koyu rolleri birlikte kullanın
Renk referansı; eşleştirilmiş ön plan, arka plan, kenarlık ve sistem rollerini tanımlar. Açık renkli metin #313131, soluk metin #626262 ve eylem rengi #00558b’dir. Koyu palet üzerinde eylem rengi #9ee8ff olur. Eylem rengi etkileşimi belirtir; açılamayan bir görevde gelişigüzel dekorasyon amacıyla kullanılmamalıdır.
Önizleme açık paleti, altı çizili mavi eylem bağlantısıyla birlikte kullanır. Engellenmiş işler, tıklamayı sessizce reddeden mavi bir denetim yerine açıklama içeren metin olarak gösterilir. Tamamlanma, sözcüklerle ve yeşil bir görünümle ifade edilir; durum hiçbir zaman yalnızca renkle belirtilmez.
Agriculture tasarım sistemi TaskList bir gezinme bileşenidir
Kullanılabilirliği tamamlanma durumundan ayırın
Gerçek TaskList, öğeleri ve isteğe bağlı bir sıralı durumunu kabul eder. Her öğenin bir etiketi ve durumu vardır; href gezinme sağlar, href belirtilmezse onClick düğmesi kullanılabilir. Kullanılabilir durum değerleri todo, doing, done, doneRecently, blocked ve notRequired’dır.
Birden çok görev içeren işlemlerde, özellikle oturumlar arasında devam eden çalışmalarda bu yapıyı kullanın. Tek alan için görev listesi gerekmez. Örnekte ürün ve rota hazırlığı ayrı ön koşullardır; inceleme öğesi, ikisi de tamamlanana kadar kullanılamaz. Bu, yerel bir gösterim kuralıdır; içe aktarma uygunluğuna ilişkin bir karar değildir.
todo, görevin başlatılabileceği anlamına gelir.
blocked, ön koşullar nedeniyle görevin başlatılamayacağı anlamına gelir; nedeni belirtin.
notRequired, görevin artık geçerli olmadığı anlamına gelir; tamamlanmış olmaktan farklıdır.
Agriculture tasarım sistemi Bağımlılıklar ve son çalışmalar
Durum rozeti bir kuralı uygulamaz
Uygulama, incelemenin başlayıp başlayamayacağını iki tamamlanma değerine göre hesaplar. Rozet etiketini değiştirmek yeterli değildir: etkinleştirme işleyicisi de aynı kuralı uygulamalıdır. Örnekteki kullanılamayan inceleme öğesi etkin bir bağlantı değildir. Bir ön koşul tamamlandığında sayaç güncellenir ve incelemenin kilidi yalnızca iki ön koşul da karşılandığında açılır.
Belgelenmiş doneRecently durumu, listeye dönüldükten sonra gösterilen geçici bir geri bildirimdir. Önizleme, az önce tamamlanan bir öğeyi kısa süreyle vurgular ve ardından tamamlandı durumuna geçirir. Sıfırlama, ön koşul durumunu geri yükler; böylece geçiş, sunucu veya hesap olmadan yinelenebilir.
Agriculture tasarım sistemi Görev listesinin yanında bağlam
Örnek kaydı görünür tutun
Görevlerin üzerindeki kompakt özet, kurgusal kaydı, ürünü ve referansı tanımlar. Bu nitelikler tek bir kaydı açıkladığından tanım listesi uygundur. React uygulamasında SummaryList, SummaryListItem, SummaryListItemTerm ve SummaryListItemDescription belgelenmiş eşdeğeri sağlar.
Etkin hazırlık paneli, görev listesinin altında normal akışta kalır. Bu gösterimde tamamlanmanın ne anlama geldiğini açıklar ve ardından bilinçli bir onay sunar. Panel açıldığında başlığı odağı alır; tamamlanınca odak liste başlığına döner. Panel, kanıt yüklediği, lisansı doğruladığı veya beyan gönderdiği izlenimini vermez.
Agriculture tasarım sistemi İstemci ve sunucu kurulumu
Somut bir işleme yolu seçin
Mevcut istemci tarafında oluşturulan bir React uygulamasında @ag.ds-next/react’i React ve Emotion eş bağımlılıklarıyla yükleyin; ardından burada gösterilen Core bileşimini kullanın. Tahmine dayalı bir genel CSS dosyası gerekmez: kütüphane, Emotion ile stiller oluşturur.
Next.js App Router, sunucu tarafında işleme sırasında Emotion stillerini toplamak ve eklemek için resmî RootStyleRegistry entegrasyonunu gerektirir. Belgelerde bu kayıt bileşeni ve bir Core sarmalayıcısı sunulur. Yalnızca istemci tarafında çalışan bir örnek, sunucu tarafında işlemenin doğruluğunu kanıtlamaz; bu nedenle bağlantısı verilen kayıt bileşenini bu ayrı entegrasyon yolunun bir parçası olarak değerlendirin.
React paketini ve Emotion bağımlılıklarını yükleyin.
Uygulamayı Core ve seçilen temayla sarın.
TaskList öğelerini uygulama durumundan oluşturun ve bağımlılıkları işleyicilerde uygulayın.
Sunucu tarafında işleme için belgelenen stil kayıt bileşenini entegre edin ve hidratasyonu denetleyin.
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>AgDS task dependencies</title><style>*{box-sizing:border-box}body{margin:0;color:#313131;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}main{max-width:62rem;padding:48px 24px;margin:auto}h1{font-size:40px;line-height:1.2;margin:16px 0 24px}h2{font-size:24px;line-height:1.3}header{border-bottom:4px solid #00558b;padding-bottom:24px}.meta{display:flex;flex-wrap:wrap;gap:24px}dt{font-weight:bold}dd{margin:4px 0 0}.tasks{padding:0;list-style:none;margin:24px 0}.task{padding:24px 0;border-bottom:1px solid #d3d3d3;display:grid;grid-template-columns:1fr auto;gap:8px 24px}.task button{background:none;border:0;padding:0;text-decoration:underline;color:#00558b;font-family:inherit;font-size:18px;font-weight:700;line-height:1.5;text-align:left;cursor:pointer}.task p{grid-column:1/-1;margin:0;color:#626262}.status{font-size:14px;border:1px solid #808080;padding:2px 8px;align-self:start;white-space:nowrap}.task[data-state=doneRecently]{background:#e5fff6}.task[data-state=done] .status,.task[data-state=doneRecently] .status{color:#00754e}.task[data-state=blocked]{color:#626262}.panel{padding:24px;background:#f5f5f5;border-left:4px solid #00558b}.panel h2{margin-top:0}.action{font-family:inherit;font-size:16px;font-weight:700;line-height:1.5;background:#00558b;color:#fff;border:2px solid #00558b;padding:10px 16px;cursor:pointer}.reset{font:inherit;padding:10px 16px;background:white;border:2px solid #00558b;color:#00558b;margin-top:24px}button:focus-visible,h2:focus{outline:3px solid #9263de;outline-offset:4px}small{display:block;color:#626262;margin-top:24px;font-size:14px}[hidden]{display:none!important}@media(max-width:767px){main{padding:24px 16px}h1{font-size:32px}.task{grid-template-columns:1fr}.status{justify-self:start}.meta{gap:16px}.panel{padding:16px}}
</style><main><header><p>AGDS PATTERN · FICTIONAL PREPARATION RECORD</p><h1>Prepare an example consignment</h1><dl class="meta"><div><dt>Reference</dt><dd>PREP-1042</dd></div><div><dt>Example commodity</dt><dd>Dried botanical samples</dd></div><div><dt>Service mode</dt><dd>Local demonstration</dd></div></dl></header><h2 id="list-heading" tabindex="-1">Preparation tasks</h2><p id="count" role="status">0 of 2 prerequisites complete</p><ol class="tasks" id="tasks"></ol><section class="panel" id="panel" hidden><h2 id="panel-heading" tabindex="-1"></h2><p id="panel-description"></p><button class="action" id="complete" type="button">Mark example check complete</button></section><button class="reset" type="button" id="reset">Reset example</button><small>OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.</small></main><script>
let done=[false,false],recent=-1,current=-1,reviewed=false,timer;const names=['Check commodity description','Check collection route','Review preparation record'];const descriptions=['Confirm that the fictional record says dried botanical samples. In a real service, this task would open the actual commodity questions.','Confirm that this example uses a local demonstration route. This does not check an actual transport route or import condition.','Both preparation checks are complete. This local review confirms only that the example tasks were visited; it does not submit a declaration.'];const tasks=document.querySelector('#tasks'),panel=document.querySelector('#panel');function render(){tasks.replaceChildren();for(let n=0;n<3;n++){const blocked=n===2&&!done.every(Boolean),complete=n<2?done[n]:reviewed;const state=blocked?'blocked':recent===n?'doneRecently':complete?'done':current===n?'doing':'todo';let li=document.createElement('li');li.className='task';li.dataset.state=state;let trigger=document.createElement(blocked?'strong':'button');trigger.textContent=names[n];if(!blocked){trigger.type='button';trigger.onclick=()=>{current=n;panel.hidden=false;document.querySelector('#panel-heading').textContent=names[n];document.querySelector('#panel-description').textContent=descriptions[n];document.querySelector('#complete').textContent=n===2?'Finish local review':'Mark example check complete';render();document.querySelector('#panel-heading').focus()}}let s=document.createElement('span');s.className='status';s.textContent={blocked:'Cannot start yet',done:'Completed',doneRecently:'Completed',doing:'In progress',todo:'Not started'}[state];li.append(trigger,s);if(blocked){let p=document.createElement('p');p.textContent='Complete both preparation checks before review.';li.append(p)}tasks.append(li)}document.querySelector('#count').textContent=done.filter(Boolean).length+' of 2 prerequisites complete'+(reviewed?' · Local review completed':'')};document.querySelector('#complete').onclick=()=>{if(current<2)done[current]=true;else reviewed=true;recent=current;current=-1;panel.hidden=true;render();document.querySelector('#list-heading').focus();clearTimeout(timer);timer=setTimeout(()=>{recent=-1;render()},2000)};document.querySelector('#reset').onclick=()=>{clearTimeout(timer);done=[false,false];recent=current=-1;reviewed=false;panel.hidden=true;render()};render();
</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
Agriculture tasarım sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Yerel paket meta verileri ve içe aktarımlar kaynaklardan doğrulanmıştır. Geçici bir yerel bağımlılık yüklemesi denendi ancak tamamlanmadı; bağımsız önizleme, yerel bir React derlemesi olduğu iddiasını taşımaz ve açıkça bir yorum niteliğindedir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/agriculture-agds.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.
bash
npm install @ag.ds-next/[email protected] @emotion/react @emotion/cache react react-dom
# Existing client-rendered React app: use the complete Core/TaskList example above.
# Next.js App Router: additionally integrate the official RootStyleRegistry.
Projeniz İçin Bir İstem
Ajan İstemi
Birden çok görev içeren hazırlık işlemi için AgDS Core ve TaskList kullanın. todo, doing, done, doneRecently, blocked ve notRequired durumlarını açıkça modelleyin. Ön koşulları yalnızca rozet metninde değil, uygulama mantığında da uygulayın. Duyarlı aralık özelliklerini, sistem yazı tipi yığınını ve ön plan/arka plan renk rollerini kullanın. Kaydın özetini görünür tutun ve engellenmiş işleri açıklayın. Devlet logolarından, uydurma mevzuat kararlarından ve sahte gönderim başarılarından kaçının.
05
Agriculture tasarım sistemi Kaynaklar ve Kapsam
Kurgusal ürün hazırlama verileri içeren örnek bir eğitim hizmeti modeli. Mevzuata uygunluk durumunu belirlemez veya işlem göndermez. Kurum kimliğine ait işaretler içermez. Yerel React API örnekleri ile yorumlanmış önizleme açıkça birbirinden ayrılmıştır.
