Altı kaynaklı eksiksiz bir okuma araç takımı üzerinden Gov Design System CE’nin gerçek renk rollerini, kart yuvalarını ve yerel sayfalandırmasını; ayrıca açık odak ve sayfa durumlarını inceleyin.
Yerel Gov CE 4.7.1 kart, düğme ve sayfalandırma bileşenleri; özgün yerel veri kümesi ve odak yönetimi. · Uygulama başvurusu
02
gov.cz tasarım sistemi Tasarım Referansı
Gerçek @gov-design-system-ce/styles 4.7.1 tokens.css renk ilkelleri ve anlamsal takma adları. Önizlemede yayımlanan stiller ve Roboto paketi kullanılır.
gov.cz tasarım sistemi Gov CE Temelleri ve Varlıkların Yüklenme Sırası
Paket sürümlerini birbiriyle uyumlu tutun
Bu örnek, bileşenleri, stilleri, simgeleri ve yazı tiplerini 4.7.1 sürümüne sabitler. Beş temel stil sayfası, yayımlanan sırayla yüklenir. Sorumlulukları farklıdır: tek başına değişkenler bir karta stil vermez; tek başına özel bir öğeyi kaydetmek de genel bileşen CSS'ini yüklemez. Eksiksiz giriş dosyası, özgün ve küçük bir birleştirme katmanından önce beş dosyanın tümünü yükler.
Bileşenleri kaydetmeden önce yapılandırmayı başlatın
Simge yolu, dinamik olarak içe aktarılan bileşen giriş modülleri çalışmadan önce yapılandırılır. Bu sıralama önemlidir; çünkü sayfalandırma, kendi bağımlılıklarının parçası olarak ok simgelerini oluşturur. Alt dizinleri koruyarak simge dizininin tamamını yapılandırılmış genel yola kopyalayın. Başarılı bir JavaScript içe aktarma, ayrı simge isteklerinin de başarılı olduğunu kanıtlamaz.
gov.cz tasarım sistemi Anlamsal Renk ve Durum Referansları
Rengi bir role bağlayın
Referans, mavi birincil renk ilkelini metin, odak ve düğme durumu takma adlarından ayırır. Her yerde aynı görünen maviyi kullanmak bu sözleşmeleri ortadan kaldırır. Araç seti, resmî düz birincil düğmeleri kullanır ve etkin, üzerine gelme ve devre dışı görünümlerini bileşen stil sayfasına bırakır. Yalnızca çevreleyen koleksiyon düzeni özgün CSS çalışmasıdır.
Tipografiyi ve içerik bağlamını görünür tutun
Roboto, eşleşen yazı tipi paketinden gelir. Kartlarda kısa ve eyleme dönük başlıklar, bir üst veri satırı ve okuma eyleminden önce bir özet bulunur. Altı kaynak metni, özgün OpenDesign alıştırma materyalidir; resmî Çek hükümeti yönergelerinin çevirisi değildir. Amaçları, bir hükümet hizmetiymiş gibi davranmadan hiyerarşiyi ve eksiksiz bir yerel etkileşimi göstermektir.
gov.cz tasarım sistemi Kart Yuvaları ve Okuma Eylemleri
Başlığı desteklenen yuvaya yerleştirin
Her gov-card bileşeninin headline yuvasında bir başlık bulunur. Üst verileri, açıklaması ve düğmesi içeriği oluşturur. Eylemin aria-label değeri, kaynak başlığını içererek yinelenen Kaynağı oku düğmelerini yardımcı teknoloji kullanıcıları için birbirinden ayırır. Bileşen, ARIA özniteliklerini kendi içindeki etkileşimli öğeye aktarır; uydurma bir accessible-label özniteliği bunu yapmaz.
Düzeni bileşen sözleşmesinin dışında tutun
Üç sütunlu bir CSS ızgarası dar ekranda tek sütuna dönüşür. Izgara ve kesme noktası bu örnek için yazılmıştır; resmî karta ait ek özellikler değildir. Önizleme, çok dar gömülü kapsayıcısının içindeyken genel 320px minimum gövde genişliğini de kaldırır. Bu sınırlı birleştirme ayarı, bileşen stilini korurken üst sayfanın taşmasını önler.
gov.cz tasarım sistemi Yerel Sayfalandırma ve Uygulama Durumu
Yerel olay yükünü okuyun
gov-pagination, total=6 ve page-size=3 değerlerini alır. gov-page olayı, eşleşen üç kaydı seçen detail.pagination.currentPage değerini sağlar. Sayfalandırma bileşeni mevcut sayfa denetimlerini yönetir; veri kümesini ve görünür dilimi uygulama yönetir. Bu İngilizce örnekte tüm varsayılan Çekçe gezinme etiketleri açıkça İngilizce etiketlerle değiştirilmiştir.
total, sayfa sayısını değil kayıt sayısını belirtir.
Sayfa değişikliğinden sonra güncelliğini yitirmiş ayrıntıları önleyin
gov.cz tasarım sistemi Okuma Odağı ve Geri Dönüş Davranışı
Açılan kaynağa odağı taşıma
Okuma eylemi, yerel ayrıntı alanını doldurur ve başlığı odaklar. Bu, koleksiyonun altına içerik ekleyen bir eylemin ardından klavye kullanıcılarına açık bir hedef sunar. Odaklanabilir başlıkta tabindex=-1 kullanılır; böylece uygulama başlığı odaklayabilir, ancak başlık normal Tab sırasına eklenmez. Açılan içerik, okunabilir sıradan metin olarak kalır.
Açan eyleme geri dönme
Kaynaklara dön seçeneği ayrıntıyı gizler ve ilk kullanılan dahili düğmeye odağı geri verir. Bu bir modal değildir: odağı hapsetmez, iletişim kutusu anlamı eklemez ve sayfayı karartmaz. İlk koleksiyon kullanılabilir durumda kalır. Tekrar tekrar açma, kapatma ve sayfalar arasında geçiş yapma; uygulama durumuyla odağın aynı kaynağı izleyip izlemediğini sınar.
gov.cz tasarım sistemi Eksiksiz Yerel Entegrasyon
Sağlanan dosyaları birlikte kullanın
Giriş; altı kaydın tamamını, kart oluşturmayı, sayfalama işlemlerini ve ayrıntıya odaklanmayı içeren eksiksiz uygulama kodudur. Stil sayfası yalnızca özgün düzeni içerir. Sabitlenmiş dört paketin tümünü yükleyin, simgeleri kopyalayın ve iki dosyayı da standart bir Vite projesinde kaydedin. Tarayıcı önizlemesi tam olarak bu bileşen girişlerini ve yerel yazı tipi dosyalarını paketler.
Dört Gov CE paketinin tümünü 4.7.1 sürümünde yükleyin.
Alt dizin yapısını koruyarak simgeleri public/assets/gov-cz-icons içine kopyalayın.
Eksiksiz JavaScript dosyasını ve düzeni içeren CSS dosyasını src içine kaydedin.
Uygulamayı çalıştırıp sayfalamayı, odağın geri dönüşünü ve simge isteklerini inceleyin.
Etkileşimi ve varlık yüklemesini doğrulayın
İlk kaynağı açın, düğmesine geri dönün, ikinci sayfaya geçin ve farklı bir kaynağı okuyun. Başlangıçta ilk/önceki denetimlerinin, sonda ise sonraki/son denetimlerinin devre dışı olduğunu doğrulayın. Aynı akışı masaüstü ve telefon genişliklerinde, daha dar bir gömülü genişlikte de inceleyin. Eksik simgelerin yanı sıra JavaScript hataları için ağ panelini kontrol edin.
gov.cz tasarım sistemi Bileşen Örnekleri
main.js — sayfalanmış araç setinin tamamı
Eksiksiz veriler, yerel bileşen kaydı, sayfa dilimleme ve okuma odağı.
JavaScript
import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
{title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
{title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
{title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
{title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
{title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
{title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`<main><p class="eyebrow">OPENDESIGN · ORIGINAL SERVICE TOOLKIT</p><h1>Small steps toward a clearer service</h1><p class="lead">Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.</p><div id="cards" class="cards"></div><div class="pagination-row"><p id="range" role="status"></p><gov-pagination total="6" page-size="3" current="1" color="primary" size="s" accessible-page-label="Page" accessible-select-label="Choose a page" label-prev="Previous page" label-next="Next page" label-start="First page" label-end="Last page" aria-label="Toolkit pages"></gov-pagination></div><section id="detail" hidden aria-labelledby="detail-title"><p class="eyebrow" id="detail-meta"></p><h2 id="detail-title" tabindex="-1"></h2><p id="detail-body"></p><gov-button id="close" type="outlined" color="primary" size="m">Back to resources</gov-button></section><aside><strong>About this example</strong><p>These are original OpenDesign practice notes, not Czech government guidance. Cards, buttons and pagination use Gov Design System CE 4.7.1. Reading a resource is local and does not submit information.</p></aside></main>`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`<h2 slot="headline">${r.title}</h2><p class="meta">${r.kind} · ${r.time}</p><p>${r.summary}</p><gov-button type="solid" color="primary" size="m" data-resource="${id}" aria-label="Read ${r.title}">Read resource</gov-button>`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;}
cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();});
document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();});
document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render();
Izgara düzeni ve gömülü minimum genişlik geçersiz kılması özgün uygulama CSS öğeleridir.
04
gov.cz tasarım sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Simge alt dizinlerini koruyun. Bu örnek doğrudan bileşen giriş modüllerini içe aktarır; kopyalanmış bir lazy-loader çalışma zamanı gerektirmez.
sh
npm create vite@latest gov-toolkit -- --template vanilla
cd gov-toolkit
npm install
npm install @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected] @gov-design-system-ce/[email protected]
mkdir -p public/assets/gov-cz-icons
cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/
# Save the supplied files as src/main.js and src/gov-cz.css.
# The root index.html must contain <div id="root"></div> and load /src/main.js.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan Gov CE 4.7.1 araç setini yerel kartlar, düğmeler ve sayfalama bileşenleriyle oluşturun. Gerçek stil sayfası sırasını ve simge yolu yapılandırmasını koruyun. gov-page detail.pagination.currentPage, anlamlı İngilizce ARIA etiketleri, sayfa değişikliklerinde eski ayrıntının kapatılması ve okuma sonrasında odağın geri verilmesi özelliklerini kullanın. Özgün örnek içerik atıflarını koruyun.
05
gov.cz tasarım sistemi Kaynaklar ve Kapsam
Gov Design System CE 4.7.1 bileşenlerini, stillerini, simgelerini ve yazı tiplerini kullanan özgün bir OpenDesign hizmet araç seti çalışması. Örnek metinler ve koleksiyon davranışı özgündür; bu, resmî bir devlet hizmeti değildir.
