Alberta tasarım sistemi.

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

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

import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
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()});

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;}