Açıklama ve boş durum davranışları içeren eksiksiz, aranabilir bir hazırlık kılavuzu aracılığıyla GC Design System tipografisini, anlamsal belirteçlerini ve yerel web bileşenlerini keşfedin.
Canada.ca tasarım sistemi Mevcut Bileşenler ve Paket Kapsamı
Güncel ad alanını kullanın
GC Design System, bu Canada.ca kaynağında kullanılan bileşen sistemidir. Örnek, @gcds-core/components 1.6.0 sürümünü sabitler ve bağımsız input, details ve button özel öğelerini kaydeder. Eski örneklerde @cdssnc ad alanı kullanılabilir. Farklı bir sürümden kayıt kodunu karıştırmak yerine yüklediğiniz paketin sürümünü esas alın.
İçerik incelemesini bir hizmetten ayrı tutun
Örnek, hazırlanmış altı konuyu sunar. Government of Canada imzası, rezervasyon entegrasyonu veya zorunlu belge iddiaları içermez. Amacı, gerçek bir aranabilir açılır içerik örüntüsünü göstermektir. Bileşenleri yeniden kullanmak, bir uygulamanın resmî hizmet olduğunu veya içeriğinin Canada.ca gereksinimlerinin tümünü karşıladığını göstermez.
Canada.ca tasarım sistemi Tipografi ve Okuma Ritmi
Her iki yazı tipi ailesini de yükleyin
Başlıklarda Lato, normal metinde Noto Sans kullanılır. Masaüstü için yayımlanan gövde metni rolü, %160 satır yüksekliğiyle 1.25rem'dir; dışa aktarılan okunabilir genişlik referansı 65ch'dir. Bu değerler, sıkı aralıklı bir gösterge paneline kıyasla çok daha ferah bir okuma ritmi oluşturur. Yerel önizleme, harici bir yazı tipi isteğinin başarısız olmasının sonucu sessizce değiştirmemesi için yayımlanan yazı tipi dosyalarını içerir.
Yazı tipi kısaltmasının tamamını dikkate alın
Belirteç tablosunda yalnızca nominal piksel boyutları değil, gerçek CSS yazı tipi kısaltması da yer alır. Kalınlık, satır yüksekliği ve aile birlikte önemlidir. Ana başlığın altındaki kısa kırmızı çizgi, Canada.ca'dan esinlenen özgün bir kompozisyon ayrıntısıdır; 72px genişliği genel bir GC boşluk belirteci olarak sunulmaz. Dar bir görüntü alanında gövde metninin okunabilirliği korunurken düzen tek sütuna dönüşür.
Canada.ca tasarım sistemi Anlamsal Renk ve Odak Davranışı
Anlamlı durumlar için herkese açık rolleri kullanın
Birincil metin #333, ikincil metin #595959, yumuşak mavi yüzey rolü ise #26374a'dır. Bağlantı, odak ve tehlike durumlarının her birinin dışa aktarılan CSS içinde ayrı bir rolü vardır. Bir bağlantı yalnızca rengini değiştirerek tanımlanmaz: yerel details açılır içeriği ayrıca bir etkileşim ipucuna ve erişilebilir bir genişletilmiş durumuna sahiptir.
Görünür odak göstergesini kaldırmayın
Yerel input ve button öğeleri, kendi bileşen odak davranışlarını sağlar. Uygulama CSS, ana hatları silmek için shadow root'lara müdahale etmeden çevresindeki düzeni yönetir. Sıfırlama, klavye kullanan kişinin sorguyu hemen daraltabilmesi için odağı arama alanına geri taşır. Shadow DOM, özel stillerin ve görünürlük kurallarının nasıl uygulandığını değiştirir; bu nedenle sıradan öğe seçicilerinin her durumu kapsadığını varsaymak yerine oluşturulan bileşeni inceleyin.
Canada.ca tasarım sistemi Ayrıntı İçeriği ve Bilgi Önceliği
Açılır içeriği destekleyici açıklamalarla sınırlı tutun
Her yerel gcds-details öğesi, varsayılan yuvasında details-title ve destekleyici metin alır. Temel talimatlar görünür kenar çubuğunda kalır. Gerçek bir randevu saati, adres veya gereksinim yalnızca bir panel genişletildikten sonra erişilebilir olmamalıdır. Altı örnek konu bilgilendirme amaçlıdır; kimlik bilgisi toplamaz ve tamamlanmış bir rezervasyon izlenimi vermez.
Kritik hizmet bilgilerini genişletme olmadan görünür tutun.
Kısa ve belirgin bir ayrıntı başlığı kullanın.
İçeriğin keşfedilmesini zorlaştıran iç içe açılır bölümlerden kaçının.
Filtreleme sırasında açılır bölüm durumunu koruyun
Canada.ca tasarım sistemi Arama Durumu ve Sonuç Bulunmadığında Kurtarma
Belgelenmiş özel olayı dinleyin
gcds-input için label, input-id ve name gerekir. gcdsInput olayı, yeni değeri event.detail içinde sağlar. Uygulama, başlıklar ve içerik metninde boşlukları temizlenmiş, küçük harfe dönüştürülmüş sorguyu arar. Canlı durum bildirimi görünür sonuç sayısını duyurur; eşleşme bulunmadığında açıklamasız boş bir alan bırakmak yerine kullanıcıya nasıl devam edebileceğini gösteren bir ileti görüntülenir.
Sıfırlama işlemini eksiksiz bir geçiş olarak uygulayın
İkincil yerel düğme, bileşendeki değeri temizler, altı girdinin tümünü geri yükler ve dahili giriş alanına odak verir. Okuyucunun daha önce açtığı açıklamayı sıfırlamaz. Bu ayrım, sorgu ve okuma durumlarının öngörülebilir kalmasını sağlar. Uzak bir veri kümesinde çalışan üretim araması ayrıca yüklenme, istek hatası ve sonuç sıralama kurallarını gerektirir; altı öğelik bu yerel filtre için bunlara gerek yoktur.
Canada.ca tasarım sistemi Tümleşik JavaScript Uygulaması
Çalışan örneği yeniden oluşturun
Vite vanilla projesi oluşturun, sabitlenmiş bileşen paketini yükleyin ve giriş dosyasını aşağıdaki tam JavaScript ile değiştirin. canada.css dosyasını yanına kaydedin ve kök bağlama öğesini koruyun. Doğrudan özel öğe giriş noktaları gerekli bağımlılıkları kaydeder; paket CSS ise tasarım belirteçleri katmanını sağlar. Kaynak kodunda veri kümesinin tamamı, kayıt işlemi, filtreleme ve sıfırlama davranışı bulunur.
Sabitlenmiş paketi bir Vite vanilla projesine yükleyin.
Tam giriş dosyasını ve canada.css dosyasını kaydedin; kök bağlama öğesini koruyun.
Eşleşme bulunmayan bir sözcük arayın ve sonuç bulunamadığında gösterilen iletinin görüntülendiğini doğrulayın.
Sıfırlayın, bir konuyu genişletin ve okuma durumunun korunduğunu denetlemek için yeniden filtre uygulayın.
Açıklama durumunu bozmadan sonuç kapsayıcılarını gizleyin
Her gcds-details öğesini sıradan bir kapsayıcının içine yerleştirin ve filtreleme sırasında kapsayıcının hidden durumunu değiştirin. Aksi durumda özel öğenin kendi görüntüleme kuralları, genel CSS seçicilerinin varsayımlarını geçersiz kılabilir. Örnekleri DOM'da tutun; sorgu temizlendiğinde genişletilmiş bir konu aynı durumda geri gelir.
Arama ve açıklama birbirinden ayrı denetimlerdir. Sorguyu gcdsInput olayının event.detail alanından okuyun, sonuç sayısını duyurun ve genişletilmiş durumunu kendi başına yönetmesi için yerel details öğesini kullanın. Sıfırlama, sorgu modelinin yanı sıra bileşen değerini de güncellemeli ve giriş alanına yeniden odak vermelidir; sonuç alanının tamamını yeniden oluşturmak okuyucunun konumunu kaybettirir.
Canada.ca tasarım sistemi Bileşeni Örnekleri
main.js — eksiksiz yerel konu filtresi
Bileşen kaydını, yazılmış konuları, filtrelemeyi, açıklama durumunun korunmasını ve sıfırlamayı içeren tam giriş dosyası.
JavaScript
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
Kök bağlama öğesiyle birlikte src/main.js olarak kaydedin. Yayımlanan paket CSS varsayılan yazı tipi URL'lerini yükler; bu yerel önizleme aynı herkese açık yazı tiplerini içerir.
canada.css — duyarlı içerik düzeni
Yerel bileşen stillerinin çevresindeki özgün sayfa düzeni.
Düzenin kırılma noktası ve başlık alt çizgisinin geometrisi, örneğe özgü tercihlerdir; ek resmî belirteçler değildir.
04
Canada.ca tasarım sistemi Agent Kurulumu
Uygulamaya Başlangıç Noktası
Yerel önizleme, sabitlenmiş özel öğeleri çalıştırır; uzak bir hizmet veya kimlik bilgisi gerekmez.
sh
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
GC Design System 1.6.0 ile altı konulu hazırlık kılavuzunu oluşturun. Gerçek tipografiyi ve tasarım belirteçleri CSS katmanını yükleyin; yerel giriş, details ve button bileşenlerini kullanın; filtreler arasında açıklama durumunu koruyun, sonuç sayısını duyurun ve sıfırlama davranışını eksiksiz uygulayın. Temel içeriği görünür tutun ve örnek açıklamaları resmî hizmet gerekliliklerinden ayırın.
05
Canada.ca tasarım sistemi Kaynaklar ve Kapsam
GC Design System 1.6.0 kullanan, OpenDesign tarafından yazılmış bir Canada.ca uygulama incelemesi. Örnek konular kurgusal yönlendirmelerdir; devlet gereklilikleri veya resmî bir randevu hizmeti değildir.
