Gerçek tema rolleri, yerel onay kutusu stilleri ve erişilebilir bir inceleme iletişim kutusu içeren, resimli ve eksiksiz bir kaynak seçici üzerinden Queensland’in Bootstrap uygulamasını keşfedin.
Queensland Government tasarım sistemi Queensland Uygulamasını Seçin
Çalışma zamanı uygulamasını açıkça belirtin
Queensland birden fazla uygulama yolunu belgeliyor. Bu çalışma, Bootstrap modal davranışıyla birlikte, herkese açık @qld-gov-au/qgds-bootstrap5 paketinin 2.4.1 sürümünü kullanıyor. Daha yeni Lit web bileşeni akışını çalıştırdığını iddia etmiyor. Uygulama adını ve sürümünü görünür tutmak, okuyucuların benzer adlara sahip ancak başlatma kuralları uyumsuz bileşenleri birbirine karıştırmasını önler.
Kararlı örnekleri geliştirme akışlarından ayırın
Resmî web bileşeni deposu mevcut akışı alfa olarak etiketlerken eski Vanilla yolu ayrı bir referans uygulamasıdır. Çalıştırılabilir örnek burada, test edilmiş tek bir Bootstrap tabanlı yolu izler. Gelecekte yapılacak bir geçişte yalnızca stil sayfası URL'sini değiştirmek yerine işaretleme, belirteç adları ve bileşen sözleşmeleri yeniden kontrol edilmelidir.
Queensland Government tasarım sistemi Tema Rolleri ve Kaynak İllüstrasyonu
Açık ve koyu rolleri birlikte inceleyin
Parametre tablosunda, gerçek paketteki eşleştirilmiş açık ve koyu roller yer alır. Birincil eylemler, bağlantı renkleri, odak ve metin rolleri, arka plan yüzeyine göre değişir. Mevcut kaynak paketi açık bir kompozisyon kullanır; koyu değerler referans amaçlıdır ve sayfada tema değiştirme denetimi bulunduğu anlamına gelmez.
Marka belirteçleri uydurmadan illüstrasyon kullanın
Her kartta numaralandırılmış, özgün bir belge çizimi bulunur. Dört yumuşak tonlu illüstrasyon arka planı, hazırlanan kaynak türlerini birbirinden ayırır. Bu renkler ve kartın 8px dış köşe yarıçapı uygulamaya özgü biçimlendirmedir ve yayımlanmış rol tablosundan ayrı olarak belirtilmiştir. Arayüzün temelini oluşturan gerçek düğmeleri, onay kutusu görünümünü ve modal biçimlendirmesini kütüphane sağlar.
Queensland Government tasarım sistemi Okuma Ölçeği ve Kart İçeriği
Genel metin yazı tipini yükleyin
Paketin genel metin rolünde sans-serif yazı tipi ailesi, 1rem boyutu ve 1.5 satır yüksekliği kullanılır. Sonucun uzaktaki bir Google Fonts isteğine bağlı olmaması için önizleme yerel Noto Sans yazı tiplerini yükler. Kartlar tek sütuna daraldığında başlıklar, açıklamalar ve seçili öğe sayısı durumu okunabilirliğini korur.
Her kaynak için yararlı bir açıklama yazın
Her kartta bir tür, tahmini okuma süresi, açıklayıcı bir başlık ve kısa bir amaç bilgisi yer alır. Süreler, kullanım analitiğine değil, hazırlanmış atölye tahminlerine dayanır. Eylem tek başına bir yardımcı teknolojiyle karşılaşıldığında da anlamlı olsun diye seçim etiketi kaynak adını tekrar eder. Kartın tamamı, tıklanabilirliği belirsiz bir hedefe dönüştürülmez.
Queensland Government tasarım sistemi Onay Kutusu Seçimi ve Türetilmiş Geri Bildirim
Seçim yokken gözden geçirme eylemini devre dışı bırakın
Bağımsız onay kutuları dört kaynağın istenen herhangi bir bileşimine izin verir. Seçili dizinler bir Set içinde tutulur; sayı ve gözden geçirme listesi bu durumdan türetilir. Set boşken seçimleri gözden geçirme eylemi devre dışıdır. Böylece görünür sıfır sayısı kullanıcıya nedenini gösterirken içeriği olmayan bir iletişim kutusunun açılması önlenir.
Birden fazla kaynak içeren liste için bağımsız onay kutuları kullanın.
Seçili öğe sayısını, iletişim kutusundakiyle aynı verilerden türetin.
Her onay kutusu etiketinde kaynak adını belirtin.
Her değişiklikte eski onay bildirimini temizleyin
Queensland Government tasarım sistemi Gözden Geçirme İletişim Kutusu ve Odağın Geri Dönüşü
Gözden geçirme sınırı için yerel modalı kullanın
Bootstrap Modal örneği, başlığıyla etiketlenmiş bir iletişim kutusu açar. Gövde, o anda seçili kaynak adlarını içerir; eylemler ise düzenlemeye devam etme veya yerel olarak onaylama seçeneklerini sunar. Escape tuşu ve kapatma denetimi iletişim kutusunu kapatır. Yerel gizlenme olayı tetiklendiğinde uygulama odağı Seçimleri gözden geçir düğmesine geri verir.
Gereksiz geçiş yarışlarından kaçının
Örnekte isteğe bağlı fade sınıfı kullanılmamıştır. Böylece hızlı bir onay veya Escape eylemi, gösterme geçişi hâlâ sürerken yok sayılmak yerine iletişim kutusunu hemen kapatabilir. Modal yine de odak yönetimini ve arka plan davranışını sağlar. Bir inceleme eyleminin etkili olup olmadığını anlamak için animasyon gerekli olmamalıdır.
Queensland Government tasarım sistemi Eksiksiz Kaynak Paketi Uygulaması
Yerel çalışmayı aynen yeniden oluşturun
Bir Vite vanilla projesi oluşturun ve sabitlenmiş QGDS Bootstrap paketini Bootstrap ve Noto Sans ile yükleyin. Tahminî bir derin dist içe aktarımı yerine paketin dışa aktardığı qld.bootstrap.css yolunu kullanın. Kök bir bağlama öğesi içeren tam giriş dosyasını ve queensland.css dosyasını kaydedin. Kaynakta tüm kaynak kayıtları, özgün SVG illüstrasyonları, seçim mantığı ve modal geçişleri bulunur.
Sabitlenmiş QGDS Bootstrap paketini ve herkese açık yazı tipini yükleyin.
Tam giriş dosyası ve CSS ile paketin dışa aktardığı stil sayfası yolunu kullanın.
İki kaynak seçin; Escape tuşunu ve odağın geri dönmesini sınayın.
Yerel olarak onaylayın, seçimi düzenleyin ve önceki sonucun temizlendiğini doğrulayın.
Modal geçişi ve odak kurallarını bilinçli seçin
QGDS Bootstrap yaklaşımında Bootstrap Modal kullanılır; bu nedenle kapatma işlemi yerel modal yaşam döngüsünü izlemelidir. Tahminî bir gecikme kullanmak yerine hidden.bs.modal sonrasında odağı Review selection düğmesine geri verin. Daha sonra fade eklenirse geçiş süresini hesaba katın: açılma sırasında hemen gönderilen bir gizleme isteği yok sayılabilir.
Modal açılırken inceleme listesini mevcut seçimden oluşturun ve bir onay kutusu değiştiğinde önceki yerel onayı geçersiz kılın. Escape, seçimleri değiştirmeden incelemeyi kapatmalıdır. Onay kutusu hedeflerini kartın illüstrasyonundan ayrı tutmak, kartın tamamına tıklama davranışlarının çakışmasını önler ve her kaynağa erişilebilir, belirgin bir seçim etiketi sağlar.
Queensland Government tasarım sistemi Bileşen Örnekleri
main.js — eksiksiz kaynak seçimi ve modal incelemesi
Özgün verilerin tamamı, illüstrasyonlar, onay kutusu durumu ve yerel modal entegrasyonu.
JavaScript
import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});
İllüstrasyon renkleri ve dış kart geometrisi, uygulamaya özgü özgün tercihlerdir.
04
Queensland Government tasarım sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Önizlemede herkese açık yazı tipi varlıkları gömülüdür ve yerel modal davranışı çalışır; sunucu tarafına gönderim uygulanmamıştır.
sh
npm create vite@latest qld-resource-pack -- --template vanilla
cd qld-resource-pack
npm install
npm install @qld-gov-au/[email protected][email protected] @fontsource/noto-sans
# Replace src/main.js and add src/queensland.css. Keep <div id="root"></div>.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
QGDS Bootstrap 2.4.1, gerçek palet rolleri ve yerel Modal kullanarak Queensland kaynak paketi çalışmasını oluşturun. Onay kutusu etiketlerini, türetilmiş sayacı, seçim yokken inceleme düğmesinin devre dışı olmasını, Escape davranışını, odağın geri dönmesini ve eski sonucun temizlenmesini koruyun. Özgün illüstrasyonları resmî tema belirteçlerinden ayrı tutun ve kaynakların gerçekten teslim edileceği izlenimini vermeyin.
05
Queensland Government tasarım sistemi Kaynaklar ve Kapsam
QGDS Bootstrap 2.4.1 kullanan, OpenDesign tarafından hazırlanmış özgün bir kaynak paketi çalışmasıdır. Bu, Bootstrap uygulamasıdır; alfa web bileşenleri akışı değildir. Seçimler yereldir ve hiçbir kaynak gönderilmez.
