# Alberta tasarım sistemi ## Alberta tasarım sistemi Arayüz Önizlemesi Birbirinden bağımsız görevleri seçin, ilerlemeyi inceleyin, yerel olarak gözden geçirin ve yerel kontrolleri temizleyin. ## Alberta tasarım sistemi Tasarım Referansı @abgov/web-components 3.0.0 içindeki gerçek açık tema CSS dışa aktarımları; lisanslı Acumin pakete dahil değildir. ### Açık temanın etkileşim ve durum rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-interactive-hover | #045092 | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-interactive-focus | #006dcc | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-text-default | var(--goa-color-greyscale-black) | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-greyscale-100 | #f2f0f0 | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-emergency-default | #da291c | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-success-default | #006f4c | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | | --goa-color-success-light | #d8f7e6 | Koyu tema geçersiz kılmaları uygulanmadan önce sabitlenen 3.0.0 stil sayfasından çıkarılan değerler. Amaçlanan durum için anlamsal rolleri kullanın. | ### Boşluk ve köşe ölçeği | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --goa-space-3xs | .125rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-2xs | .25rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-xs | .5rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-s | .75rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-m | 1rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-l | 1.5rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-xl | 2rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-2xl | 3rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-space-3xl | 4rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-border-radius-xs | .25rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-border-radius-s | .375rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-border-radius-m | .5rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | | --goa-border-radius-l | .625rem | Yayımlanmış boşluk veya yarıçap temel değeri. Uygulamanın iki sütunlu düzene geçtiği eşik, tasarıma özgü bir tercihtir. | ### Tipografi temel değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-2 | .875rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-3 | 1rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-4 | 1.125rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-6 | 1.5rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-8 | 2rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-size-9 | 2.5rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-line-height-3 | 1.5rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-line-height-6 | 2.5rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-line-height-7 | 3rem | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-weight-regular | 400 | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | | --goa-font-weight-bold | 700 | Resmî yazı tipi ailesi dışa aktarımı burada belirtilmiştir; herkese açık örnek, lisanslı Acumin yazı tipi dosyalarını yeniden dağıtmak yerine bilerek Arial yedeği kullanır. | ## Alberta tasarım sistemi Eksiksiz Kılavuz 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ı. ## Alberta tasarım sistemi Web Bileşenleri ve Sürüm Sınırları ### Önce gerçekten çalışan uygulamayla başlayın > Bu örnek @abgov/web-components 3.0.0 sürümünü çalıştırır. JavaScript dosyasının içe aktarılması özel öğeleri kaydeder; index.css dosyasının içe aktarılması genel belirteç katmanını sağlar. Ham HTML API, goa önekli öğeler kullanır; React örneklerinde farklı bir olay arayüzüne sahip Goab sarmalayıcıları kullanılır. React onChange özelliklerini doğrudan ham özel öğelere kopyalamayın. ### Paket sürümlerini tasarım sürümlerinden ayırın Paket sürümü ile bileşen stil sürümü aynı alan değildir. Bazı kontrollerde bağımsız bir sürüm niteliği belgelenmiştir. Bu örnek, başka bir belirteç değerleri kümesine atıfta bulunurken stil sürümünü fark ettirmeden değiştirmek yerine sabitlenmiş paketin varsayılanlarını kullanır. Tabloda bu derlemede kullanılan gerçek açık tema dışa aktarımları kayıtlıdır. ## Alberta tasarım sistemi Roller, Ritim ve Tipografi ### Durumu açıklamak için renk kullanın Birincil eylem ve ilerleme vurgusu, etkileşim-varsayılan rolünü kullanır. Geçersiz incelemede, yararlı bir yönergeyle birlikte acil durum metni gösterilir; yerel inceleme tamamlandığında başarı renginde bir destek yüzeyi kullanılır. Başarı rengi, yerel inceleme durumunu ifade eder; bir devlet hizmetine gönderilmiş başvuruyu değil. Metin etiketleri ve sayısal sayaç, aynı bilgiyi renge bağlı kalmadan aktarır. ### Yazı tipi sınırını belgeleyin Yayımlanan yazı tipi ailesi Acumin ile başlar ve stil sayfasında harici olarak barındırılan yazı tiplerine yönelik bildirimler bulunur. Önizlemede açıkça Arial yedeği kullanılır ve bu harici yazı tipi istekleri kaldırılır; Acumin yeniden dağıtılmaz. Belirteç referansında gerçek aile adı korunur; böylece yetkili bir hizmet onaylı marka yazı tiplerini yükleyebilir. Yedek yazı tipinden lisanslı yazı tipine geçerken satır kaymalarını yeniden kontrol edin. ## Alberta tasarım sistemi Onay Kutusu Etiketleri ve Açıklamaları ### Birbirinden bağımsız görevler için bağımsız seçenekler kullanın Dört yerel goa-checkbox kontrolü, istenen sırada gözden geçirilebilen hazırlık maddelerini temsil eder. Her birinin benzersiz bir adı, görünür bir metni ve amacını açıklayan bir açıklaması vardır. Radyo düğmeleri tek bir seçim yapılması gerektiğini ima edeceğinden bu görevi yanlış yansıtır. Gerçek bir hizmette kurgusal hazırlık içeriği, araştırmaya dayalı yönergelerle değiştirilmelidir. - Her onay kutusuna sabit ve benzersiz bir ad verin. - Görünür etiketi kısa, açıklamayı ise belirgin ve bilgilendirici tutun. - Birden fazla seçeneğin anlamlı olduğu durumlarda bağımsız onay kutuları kullanın. ### Özel olay yükünü okuyun Ham web bileşeni, event.detail içinde name, checked ve value alanlarını içeren _change olayını tetikler. Uygulama, seçili dizinleri güncellemek için checked mantıksal değerini kullanır. Durumu etiket metninden çıkarmaz ve küçük bir iç girdiye tıklanmasını gerektirmez. Böylece görünür etikete tıklamakla klavyeden seçim yapmak aynı durum geçişini sağlar. ## Alberta tasarım sistemi İlerleme ve İnceleme Durumu ### İlerlemeyi seçimden türetin Sayaç ve yerel HTML ilerleme öğesi aynı Set üzerinden türetilir. İki öğe seçildiğinde ilerleme dört üzerinden iki olur; kontroller temizlendiğinde her iki gösterge de sıfırlanır. İlerleme öğesinin erişilebilir bir adı vardır; yanındaki durum metni açık bir sayı verir. Yükleme, ağ isteği veya tamamlanma zamanlayıcısı simüle edilmez. ### Düzenleme sonrasında eski özetleri geçersiz kılın İnceleme, yalnızca en az bir öğe seçilmişse yerel bir metin özeti oluşturur. Hiçbir öğe seçilmemişse bir mesaj gösterilir ve odak ilk onay kutusuna taşınır. Onay kutularındaki sonraki her değişiklik, önceki incelemeyi gizler; böylece yeni seçimleri temsil ediyormuş gibi görünmez. Seçimleri temizlemek yalnızca görsel sayacı değil, gerçek yerel kontrolleri de günceller. ## Alberta tasarım sistemi Duyarlı Kontrol Listesi Düzeni ### Görev ve bağlamın okunaklı olmasını sağlayın Masaüstü düzeninde kontrol listesi, yanında bir ilerleme paneliyle gösterilir. Dar ekranlarda panel, belge sıralamasına göre kontrollerin ardından gelir. Görev etiketleri okunaklı boyutta kalır, açıklamalar da doğal biçimde alt satırlara geçer. Yan paneldeki mavi çizgi ölçülü bir yönlendiricidir; başka bir eylem odağı oluşturmaz. ### Etkileşim hedeflerini koruyun Bileşen kitaplığı, onay kutusu ve düğme etkileşim stillerini sağlar. Uygulamanın CSS ayarları, yerel tıklama alanlarını değiştirmeden boşlukları ve çevreleyen ızgarayı düzenler. Küçük ekranlarda iki eylem alt satıra geçebilir. İncele birincil eylemdir; Seçimleri temizle görsel olarak ikincildir ve gerçek bir uygulamadaki sonraki adım gibi görünmez. ## Alberta tasarım sistemi Eksiksiz Kontrol Listesi Uygulaması ### Kaynak kodunun tamamını çalıştırın Bir Vite vanilla projesi oluşturun, sabitlenmiş web-components paketini yükleyin ve sağlanan entry ile CSS dosyasını kaydedin. Kök bağlama öğesini koruyun. JavaScript, yazılan dört görevin tamamını, yerel olay bağlamalarını, türetilmiş sayıyı ve gözden geçirme/sıfırlama geçişlerini içerir. Hesap, özel uç nokta veya harici veri kümesi gerekmez. 1. @abgov/web-components 3.0.0 paketini yükleyin ve JavaScript ile index.css dosyalarını içe aktarın. 2. Tam entry dosyasını ve kök bağlama öğesini içeren alberta.css dosyasını kaydedin. 3. Birden fazla görev seçin ve türetilmiş ilerlemeyi kontrol edin. 4. Gözden geçirin, bir seçeneği düzenleyin, ardından tüm yerel seçimleri temizleyin. ### Bileşen olaylarını kontrol listesi politikasından ayırın Seçim için kaynak olarak ham _change olayındaki event.detail.checked değerini kullanın. React sarmalayıcı özellikleriyle ham goa-checkbox olayları farklı arayüzlerdir; yükü uyarlamadan birinden diğerine kopyalanan bir işleyici, ilerleme göstergesinin ekranda görünen onay kutusuyla eşzamanlı olmamasına neden olabilir. Kontrol listesindeki en az bir öğe seçme zorunluluğu, yerleşik bir onay kutusu kuralı değil, uygulama politikasıdır. Sayıyı, ilerleme değerini ve gözden geçirme metnini tek bir seçim Set nesnesinden türetin. Seçimleri temizlerken Set nesnesinin yanı sıra her özel öğenin checked özelliğini de sıfırlayın. Bir seçenek düzenlendiğinde eski gözden geçirme metnini hemen kaldırın; böylece önceki seçimi açıklamaya devam etmez. Gerçek bir hazırlık hizmeti eksik kontrol listelerine izin verebilir; ilerlemeyi bir koşul hâline getirmeden önce bu politikayı belirleyin. ## Alberta tasarım sistemi tasarım sistemi Bileşen Örnekleri ### main.js — tamamlanmış yerel kontrol listesi Tüm kayıt işlemleri, yazılmış görev içeriği, seçim yönetimi ve gözden geçirme/sıfırlama geçişleri. ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()}); ``` Kod referansı - Ham özel öğeler _change ve _click olaylarını kullanır; bunların yerine React sarmalayıcı geri çağrılarını kullanmayın. ### alberta.css — görev düzeni ve açık yazı tipi yedeği Yerel kontroller etrafında özgün, duyarlı düzen. ``` main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}} /* Public specimen font fallback; load approved Acumin only where licensed. */ :root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;} ``` Kod referansı - Yerel önizlemede kullanılmayan harici yazı tipi içe aktarımları çıkarılmıştır. Paketin tam stil sayfasında harici yazı tipi bildirimleri bulunabilir; bu geçersiz kılma, bu çalışmada Arial kullanılmasını sağlar. ## Alberta tasarım sistemi Agent Kurulumu ### Uygulamaya Başlangıç Noktası Sabitlenmiş yerel kontroller, gönderim arka ucu olmadan yerel olarak tarayıcıda test edildi. ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### Projeniz İçin Bir İstem ``` Alberta hazırlık kontrol listesini web-components 3.0.0, gerçek anlamsal CSS rolleri ve açık yazı tipi lisanslama sınırlarıyla oluşturun. Yerel onay kutusu açıklamalarını kullanın, ilerlemeyi seçimden türetin, boş gözden geçirmeleri reddedin, düzenlemelerden sonra eski özetleri temizleyin ve gerçek kontrolleri sıfırlayın. Tüm sonuçları yerel tutun ve yazılmış görevlerin yalnızca örnek amaçlı olduğunu açıkça belirtin. ``` ## Alberta tasarım sistemi Kaynaklar ve Kapsam Alberta web bileşenleri 3.0.0 sürümünü ve açık Arial yazı tipi yedeğini kullanan bir OpenDesign bileşen çalışması. Yazılmış görevler kurgusaldır ve kamu uygunluk ya da başvuru gerekliliklerini tanımlamaz. - Geliştirici kurulumu Paket içe aktarımları ve desteklenen uygulamalar. - Onay kutusu API Ham özel öğe nitelikleri ve olayları. - Düğme API Eylem türleri ve bileşen davranışı. - Genel kaynak kodu Sürümlenmiş bileşen uygulaması ve CSS dışa aktarımları. ## Alberta tasarım sistemi İlgili Kaynaklar ### Amsterdam Eksiksiz ve nötr bir tema, erişilebilir etiketler ve anında okuma tercihleriyle Amsterdam’ın gerçek açık kaynaklı Switch sözleşmesini kullanın. ### B.C. tasarım sistemi Gerçek anlamsal belirteçler, yerel React Aria kontrolleri, koşullu iletişim alanları ve eksiksiz doğrulama davranışıyla B.C. tarzında bir hatırlatma tercih formu oluşturun. ### Canada.ca tasarım sistemi 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. - [Uygulama başvurusu](https://design.alberta.ca/components/checkbox/) - [Kaynak](https://github.com/GovAlta/ui-components) - [Kod referansı](https://design.alberta.ca/components/checkbox/) - [Kod referansı](https://design.alberta.ca/get-started/developers/setup/) - [Geliştirici kurulumu Paket içe aktarımları ve desteklenen uygulamalar.](https://design.alberta.ca/get-started/developers/setup/) - [Onay kutusu API Ham özel öğe nitelikleri ve olayları.](https://design.alberta.ca/components/checkbox/) - [Düğme API Eylem türleri ve bileşen davranışı.](https://design.alberta.ca/components/button/) - [Genel kaynak kodu Sürümlenmiş bileşen uygulaması ve CSS dışa aktarımları.](https://github.com/GovAlta/ui-components)