# gov.cz tasarım sistemi ## gov.cz tasarım sistemi Arayüz Önizlemesi İki sayfaya yayılmış altı özgün kaynağa göz atın, bir okuma ayrıntısını açın ve eylemine geri dönün. ## 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. ### Birincil ve nötr renk ilkelleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-primary-100 | rgb(226, 238, 248) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-primary-600 | rgb(0, 70, 155) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-primary-700 | rgb(14, 53, 120) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-primary-800 | rgb(16, 38, 87) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-secondary-600 | rgb(250, 180, 19) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-neutral-0 | rgb(255, 255, 255) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-neutral-50 | rgb(246, 246, 246) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | | --color-neutral-950 | rgb(38, 38, 38) | Yayımlanan 4.7.1 ilkel değerleri. Uygulama normalde bunlara karşılık gelen anlamsal rolü kullanmalıdır. | ### Okuma ve geri bildirim rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --text-secondary | var(--color-neutral-700) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --text-primary-color | var(--color-primary-600) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --text-white | var(--color-neutral-0) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --text-status-error | var(--color-error-700) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --text-status-success | var(--color-success-700) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --status-focus | var(--color-focus-600) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --status-warning | var(--color-warning-400) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | | --status-error | var(--color-error-600) | Rolün görünür kalması için anlamsal takma adlar korunur; her takma adı ilgisiz bir yerel onaltılık değere dönüştürmeyin. | ### Birincil düğme durumları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-solid-primary-hover | var(--color-primary-700) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-solid-primary-active | var(--color-primary-800) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-solid-disabled | var(--color-neutral-200) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-outlined-primary | var(--color-primary-50) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-outlined-primary-hover | var(--color-primary-100) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | | --button-outlined-primary-active | var(--color-primary-200) | Yayımlanan düğme stilinin kullandığı gerçek durum belirteçleri. Devre dışı, üzerine gelme ve etkin durumlarını birbirinden ayrı tutun. | ## gov.cz tasarım sistemi Eksiksiz Rehber Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. - page-size, dilim uzunluğunu belirler. - gov-page, detail.pagination.currentPage değerini sunar. - Gezinme etiketleri arayüzün diliyle eşleşmelidir. ### Sayfa değişikliğinden sonra güncelliğini yitirmiş ayrıntıları önleyin Sayfa değiştiğinde açık kaynak kapatılır; böylece ayrıntıların farklı bir kart grubuna aitmiş gibi görünmesi önlenir. Sayı, 6 kaynağın 1–3 veya 4–6 aralığını gösterir. Bu, bilinen ve küçük bir veri kümesi üzerinde yerel sayfalamadır; yapay bir yükleme simgesi gösterilmez ve sunucu isteği yapıldığı iddia edilmez. Sunucu destekli bir uygulama için ayrı bir bekleme, hata ve sonuç sözleşmesi gerekir. ## 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. 1. Dört Gov CE paketinin tümünü 4.7.1 sürümünde yükleyin. 2. Alt dizin yapısını koruyarak simgeleri public/assets/gov-cz-icons içine kopyalayın. 3. Eksiksiz JavaScript dosyasını ve düzeni içeren CSS dosyasını src içine kaydedin. 4. 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ğı. ``` 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=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; 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=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;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(); ``` Kod referansı - Yapılandırma, bileşen girişlerini içe aktarmadan önce çalışır. ARIA adlarında aria-label kullanılır. ### gov-cz.css — özgün koleksiyon düzeni Yerel bileşen stillerini koruyan duyarlı ızgara ve okunabilir yerel ayrıntı alanı. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` Kod referansı - Izgara düzeni ve gömülü minimum genişlik geçersiz kılması özgün uygulama CSS öğeleridir. ## 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. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 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
and load /src/main.js. npm run dev ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - HTML entegrasyonu Varlık sırası, kayıt ve bileşen düzeni. - Sayfalama Sayfa denetimleri ve gezinme anlamı. - Card Kart içeriği ve başlık yuvası. - Renk belirteçleri Temel ve anlamsal renk rolleri. - Tipografi Yazı tipi ve metin hiyerarşisi. ## gov.cz tasarım sistemi İlgili Kaynaklar ### GOV.UK tasarım sistemi Güncel v6 yazı tipi ölçeği, duyarlı boşluklar, işlevsel renkler, bağlantılı doğrulama ve somut Frontend entegrasyonuyla GOV.UK tarzı bir soru yanıtlama ve cevapları kontrol etme akışı oluşturun. ### HarvardSites tasarım sistemi HarvardSites’ı editoryal bir platform olarak tanıyın: site stillerini karşılaştırın, belgelenmiş yazı tipi eşleşmelerini seçin ve üniversite sayfalarını belirli içerik bileşenleriyle oluşturun. ### Helsinki Eksiksiz bir yerel inceleme ve düzeltme akışıyla yerel HDS seçim gruplarını, anlamsal geri bildirim renklerini ve bağlantılı hata özetlerini bir araya getirin. - [Uygulama başvurusu](https://designsystem.gov.cz/komponenty/pagination) - [Kaynak](https://designsystem.gov.cz/principy/barevne-tokeny) - [Kod referansı](https://designsystem.gov.cz/zaciname/developers/html) - [Kod referansı](https://designsystem.gov.cz/komponenty/card) - [HTML entegrasyonu Varlık sırası, kayıt ve bileşen düzeni.](https://designsystem.gov.cz/zaciname/developers/html) - [Sayfalama Sayfa denetimleri ve gezinme anlamı.](https://designsystem.gov.cz/komponenty/pagination) - [Card Kart içeriği ve başlık yuvası.](https://designsystem.gov.cz/komponenty/card) - [Renk belirteçleri Temel ve anlamsal renk rolleri.](https://designsystem.gov.cz/principy/barevne-tokeny) - [Tipografi Yazı tipi ve metin hiyerarşisi.](https://designsystem.gov.cz/principy/typografie)