# Queensland Government tasarım sistemi ## Queensland Government tasarım sistemi Arayüz Önizlemesi Resimli kaynakları seçin, yerel bir modalda adlarını gözden geçirin ve yerel listeyi düzenleyin. ## Queensland Government tasarım sistemi Tasarım Referansı Gerçek @qld-gov-au/qgds-bootstrap5 2.4.1 CSS dışa aktarımları ve Bootstrap modal davranışı; yerel olarak yüklenen Noto Sans ile. ### Varsayılan açık palet | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-action-primary-hover | #003e96 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-background-default | #ffffff | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-background-alt | #e3e7ea | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-focus-default | #002e85 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-link-default | #005eb8 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-link-visited | #551a8b | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-text-default | #353535 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | | --qld-color-default-color-light-text-heading | #000053 | Gerçek QGDS Bootstrap 2.4.1 açık rolü. İlgili açık yüzeyle birlikte kullanın. | ### Varsayılan koyu palet | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-background-default | #005eb8 | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-background-alt | #001d74 | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-focus-default | #c6ffff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-link-default | #ffffff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-link-visited | #f2cdff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-text-default | #ffffff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | | --qld-color-default-color-dark-text-heading | #ffffff | Gerçek eşleştirilmiş koyu rol; amaçlanan eşini kontrol etmeden açık ön plan rengini koyu yüzeyde yeniden kullanmayın. | ### Gövde metni, köşeler ve modal geometrisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-body-font-size | 1rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-body-line-height | 1.5 | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius | .25rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius-sm | .25rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius-lg | .25rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius-xl | 1rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius-xxl | 2rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-border-radius-pill | 50rem | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-modal-border-radius | var(--qld-border-radius-lg) | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | | --qld-modal-title-line-height | 1.5 | Dışa aktarılan uygulama değeri. Özgün kaynak illüstrasyonu renkleri ve 8px kart köşeleri örnek seçimleridir; ek resmî tema belirteçleri değildir. | ## Queensland Government 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ı. ## 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 Yerel bir onaydan sonra başka bir kaynak seçildiğinde veya seçim kaldırıldığında eski sonuç gizlenir. Böylece özet, düzenlenen listeyi yansıtıyormuş gibi görünmeye devam etmez. Listeyi temizlemek hem Set'i hem de gerçek onay kutusu girişlerini sıfırlar ve odağı ilk seçeneğe geri getirir. Önizlemede dosya oluşturulmaz veya iletilmez. ## 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. 1. Sabitlenmiş QGDS Bootstrap paketini ve herkese açık yazı tipini yükleyin. 2. Tam giriş dosyası ve CSS ile paketin dışa aktardığı stil sayfası yolunu kullanın. 3. İki kaynak seçin; Escape tuşunu ve odağın geri dönmesini sınayın. 4. 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. ``` 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=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;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()}); ``` Kod referansı - Paket stil sayfası, dışa aktarılan bir giriş noktası kullanır. Yerel onay, dosya indirme veya hizmete gönderim değildir. ### queensland.css — özgün kart düzeni Yerel bileşen stillerini tamamlayan duyarlı kartlar ve dekoratif belge çizimleri. ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` Kod referansı - İllüstrasyon renkleri ve dış kart geometrisi, uygulamaya özgü özgün tercihlerdir. ## 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. ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Uygulama seçenekleri Vanilla, Bootstrap ve geliştirilmekte olan web bileşeni seçenekleri. - Sürümü belirlenmiş Bootstrap kaynağı Yayımlanan CSS, varlıklar ve uygulama. - Kart yönergeleri İçerik hiyerarşisi ve kart kullanımı. - Web bileşenlerinin durumu Açık alfa durumu ve ayrı entegrasyon sözleşmesi. ## Queensland Government tasarım sistemi İlgili Kaynaklar ### Ripple Aşamalı açılır içerik, ilerleme göstergesi ve sonraki adıma klavye odağı içeren eksiksiz bir atölye zaman çizelgesi üzerinden Ripple’ın gerçek renk rollerini, 14 kademeli aralık ölçeğini ve duyarlı tipografi referanslarını keşfedin. ### Scottish Government tasarım sistemi İskoç Hükümeti’nin duyarlı tipografi, aralık ve renk rollerini, sınırı aşan metni koruyan ve düzeltme olanağı sunan yerel bir karakter sayacı alanında uygulayın. ### Singapore Government tasarım sistemi Güncel SGDS Web Components bileşenlerini gerçek duyarlı belirteçler, gündüz ve gece temaları ve yerel planı senkronize tutan yerel, sınırlandırılmış miktarlarla kullanın. - [Uygulama başvurusu](https://github.com/qld-gov-au/qgds-bootstrap5) - [Kaynak](https://github.com/qld-gov-au/qgds-bootstrap5) - [Kod referansı](https://github.com/qld-gov-au/qgds-bootstrap5) - [Kod referansı](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Uygulama seçenekleri Vanilla, Bootstrap ve geliştirilmekte olan web bileşeni seçenekleri.](https://www.designsystem.qld.gov.au/get-started/developing) - [Sürümü belirlenmiş Bootstrap kaynağı Yayımlanan CSS, varlıklar ve uygulama.](https://github.com/qld-gov-au/qgds-bootstrap5) - [Kart yönergeleri İçerik hiyerarşisi ve kart kullanımı.](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Web bileşenlerinin durumu Açık alfa durumu ve ayrı entegrasyon sözleşmesi.](https://github.com/qld-gov-au/qgds-web-components)