Bağımsız bir yerel okuma listesi içeren eksiksiz bir atölye kılavuzunda NSW tasarım belirteçlerini, Public Sans tipografisini ve klavyeyle erişilebilen yerel sekmeleri keşfedin.
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-brand-light
#cbedfd
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-brand-supplementary
#146cfd
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-brand-accent
#d7153a
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-brand-accent-light
#ffe6ea
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-grey-01
#22272b
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-grey-02
#495054
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-grey-03
#cdd3d6
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-grey-04
#ebebeb
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-off-white
#f2f2f2
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-text-dark
#22272b
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
--nsw-text-light
#fff
Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder.
NSW tasarım sistemi Sabitlenmiş Çalışma Zamanı ve Tema
Yerel sekme uygulamasını kullanın
Örnek, nsw-design-system 3.27.0 sürümünü çalıştırır. Paket CSS ve Tabs sınıfını içe aktarır, ardından işaretlemeyi oluşturduktan sonra tek sekme grubunu başlatır. Bu odaklı başlatma, sayfada bulunmayan ilgisiz bileşenlerin kaydedilmesini önler. Güncel belgeler daha yeni bir sürümü açıklıyor olabilir; buradaki indirilebilir kod ve tasarım belirteci değerleri doğrulanmış pakete bağlı kalır.
Bileşenleri uygulama durumundan ayırın
Yerel Tabs sınıfı sekme seçimini, panel görünürlüğünü ve klavye gezinmesini yönetir. Uygulama ise kaydedilen istemlerden oluşan bir Set'e sahiptir. Bu nedenle aşamalar arasında geçiş yapmak okuma listesini değiştirmez. Kaynak kodunda bu ayrım açıkça görülür: gizli bir genel durum deposu, arka uç isteği veya taklit edilmiş bir devlet hesabı yoktur.
NSW tasarım sistemi Marka Rolleri ve Okunaklı Yüzeyler
Koyu ve açık rolleri birlikte kullanın
Varsayılan koyu marka rengi #002664, açık yüzey rengi ise #CBEDFD'dir. İstem panelinde açık rol ve koyu renkli bir eylem kullanılır. Etkin sekmede paketin vurgu stili uygulanır. Bunlar, kamu sektörü sitesini çağrıştırması için seçilmiş gelişigüzel bir mavi palet değil, gerçek tema rolleridir. Örnekte resmî bir devlet logosu kullanılmaz.
Belirteç adlarını dikkatle yorumlayın
text-light belirteci beyazdır. Koyu arka planlarda kullanılmalıdır; genel anlamda soluk metnin eş anlamlısı olarak kullanılmamalıdır. Aşama açıklamalarında bunun yerine daha koyu nötr rol kullanılır. Referansta durum ön planı/arka planı eşleşmeleri bulunur; ancak atölye, mevcut tüm renkleri sergilemek uğruna uyarı veya başarı bildirimi uydurmaz.
NSW tasarım sistemi Public Sans ve Duyarlı Ölçek
Düzeni incelemeden önce yazı tipini yükleyin
Örnekte Public Sans'ın 400 ve 700 ağırlıkları yerel olarak yüklenir. Paket, mobil ve masaüstü boyutlarını ayrı ayrı tanımlar: orta boy metin 1.125rem'den 1.25rem'e, en büyük başlık referansı ise 2.25rem'den 3rem'e çıkar. Bu eşleşmeler, kullanılabilir genişlik değiştikçe okuma hiyerarşisinin korunmasına yardımcı olur.
İçerik hiyerarşisini sade tutun
Kısa bir aşama etiketi; açıklayıcı bir başlık, giriş, açıklama paragrafı ve kaydedilmiş bir istemden önce gelir. Sayfadaki her cümle ayrı bir karta dönüştürülmez. Dar ekranlarda okuma listesi aşama panelinin ardından gelir; kısa, üç etiketli sekme şeridi de metni birden fazla satıra sıkıştırmadan kullanılabilir kalır.
NSW tasarım sistemi Sekme İşaretlemesi ve Klavye Davranışı
Bileşenin gerçek bağlantıları geliştirmesine izin verin
Başlangıçtaki sekme listesi, benzersiz içerik kimliklerine giden bağlantılar içerir. Başlatma işlemi tablist/tab/tabpanel anlamlarını ekler, seçimi yönetir ve odaklanabilir sekmeyi ayarlar. Bileşenin panelleri bulabilmesi için href hedeflerinin doğru olması gerekir. Bir sayfaya birden fazla sekme grubu eklerken kimlikleri yinelemeyin.
Her sekme bağlantısını tek bir panel kimliğiyle eşleştirin.
Grubu, işaretlemesini ekledikten sonra başlatın.
Seçimi ve klavye odağını yerel bileşenin yönetmesine izin verin.
Tıklamanın yanı sıra klavyeyle seçimi de denetleyin
NSW tasarım sistemi Kaydedilen İstemler ve Gerçekçi Geri Bildirim
Kaydedilen durumu görünür sekmeden bağımsız tutun
Her aşamanın eylemi, ilgili istemi bir Set'te açıp kapatır, aria-pressed değerini günceller ve etiketini Save ile Remove arasında değiştirir. Okuma listesinin sayısı ve öğeleri bu Set'ten türetilir. Kaydedilmiş bir aşamaya dönüldüğünde seçili durumu doğru biçimde gösterilir. Clear reading list, tüm seçimleri kaldırır ve temizlenecek bir şey kalmadığında devre dışı kalır.
Durum kalıcılığının sınırını açıklayın
Okuma listesi sayfanın yerel durumudur ve sayfa yeniden yüklendiğinde kaybolur. Arayüz bunu açıkça belirtir. Gerçekten kalıcı bir liste için açıkça tanımlanmış bir depolama modeli ve geri yükleme davranışı gerekir; burada bunların hiçbiri varsayılmaz. İçerik, özgün bir tasarım tartışması çalışmasıdır; hizmet uygunluk kılavuzu değildir ve resmî bir NSW iş akışının yeniden oluşturulduğunu iddia etmez.
NSW tasarım sistemi Eksiksiz Uygulama ve İnceleme
Bağımlılıklarıyla birlikte kaynak kodunu yeniden oluşturun
Bir Vite vanilla projesi oluşturun, nsw-design-system 3.27.0 ve Public Sans'ı yükleyin, ardından sağlanan giriş dosyasını ve nsw.css dosyasını kaydedin. Kök bağlama öğesini koruyun. Üç aşamanın tüm içeriği, özgün istemler, yerel Tabs başlatması ve okuma listesi işleyicileri dahildir. Kaydetme/sıfırlama davranışının yerine sözde kod kullanılmamıştır.
Sabitlenmiş NSW paketini ve Public Sans yazı tipi dosyalarını yükleyin.
Eksiksiz giriş dosyasını ve nsw.css dosyasını kök bağlama öğesiyle birlikte kaydedin.
İstemleri iki farklı sekmede kaydedin ve durumun korunduğunu denetleyin.
ArrowRight tuşunu kullanın, listeyi temizleyin ve boş durumu inceleyin.
Sekme gezinmesini kaydedilen içerikten ayrı tutun
Yerel Tabs sınıfını, bağlantı hedefleri ve paneller oluşturulduktan sonra başlatın. Eşleşen parça kimlikleri, geliştirme sözleşmesini oluşturur: sekme etiketleri hâlâ doğru görünse bile bir panelin kimliğini href değerini değiştirmeden değiştirmek ilişkiyi bozar. Sayfada birden fazla grup varsa her gruba farklı kimlikler verin.
Okuma listesini sekme örneğinin dışındaki uygulama durumu olarak ele alın. Bir istemin kaydedilmiş durumu, panel değişikliklerinde korunmalı ve panel yeniden görüntülendiğinde aria-pressed bu durumu yansıtmalıdır. Okuyucuların yeniden ziyaret edebileceği eş düzey içeriklerde sekmeleri kullanın; tamamlanmış adımlar gerektiren sıralı bir form için farklı bir gezinme modeli gerekir. Kalıcılık için de bu sayfaya özgü örneği sessizce değiştirmek yerine açık bir depolama ve geri yükleme politikası gerekir.
NSW tasarım sistemi Bileşen Örnekleri
main.js — eksiksiz yerel sekme ve okuma listesi örneği
Özgün aşama içeriklerinin tamamını, sekme başlatmasını ve eksiksiz kaydetme/kaldırma/sıfırlama mantığını içerir.
JavaScript
import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});
Açıklayıcı aşama etiketinde koyu nötr kullanılır; --nsw-text-light beyazdır.
04
NSW tasarım sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Yerel sekme tıklamaları ve ok tuşları, kaydedilmiş durumun korunması, listeyi temizleme ve duyarlı düzen yerel ortamda test edildi.
sh
npm create vite@latest nsw-workshop -- --template vanilla
cd nsw-workshop
npm install
npm install [email protected] @fontsource/public-sans
# Replace src/main.js and add src/nsw.css. Keep <div id="root"></div>.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
3.27.0 sürümündeki yerel Tabs, Public Sans ve gerçek anlamsal rollerle NSW atölye kılavuzunu oluşturun. Benzersiz panel kimliklerini, klavye ile seçimi, bağımsız kaydedilmiş istem durumunu ve kullanışlı bir boş okuma listesini koruyun. Kalıcılığın yalnızca yerel olduğunu açıkça belirtin ve resmî hizmet iddialarından kaçının.
05
NSW tasarım sistemi Kaynaklar ve Kapsam
NSW Design System 3.27.0 kullanan, OpenDesign tarafından hazırlanmış bir atölye çalışması. Yerel sekme davranışı gerçektir; içerik ve kaydedilen istem iş akışı ise özgün yerel uygulama mantığıdır.
