Singapore Government tasarım sistemi.

Singapore Government tasarım sistemi Mevcut SGDS ailesini seçin

Web bileşenleri ve eski Bootstrap sayfaları

SGDS v 3, @govtechsg/sgds-web-component kullanır. Özel öğeleri, tema belirteçleri ve güncel yardımcı sınıf entegrasyonu, eski @govtechsg/sgds Bootstrap stil sayfasından farklı bir uygulama yoludur. v 2 JavaScript talimatlarını v 3 etiketleriyle karıştırıp yeni kontrollerin başlatılmasını beklemeyin.

Örnek, quantity toggle'ları ve düğmeleri kaydetmek için gerçek 3.29.0 tarayıcı paketini kullanır. Singapur Hükûmeti başlık bandı veya bağlılık iddiası olmadan özgün bir topluluk atölyesi planlayıcısı sunar. Kontroller yalnızca yerel değerleri değiştirir; rezervasyon veya ödeme iş akışı yoktur.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Tema belirteçleri katmanlıdır

Temel renkler ve anlamsal kullanım

Kök dosya; temel grileri, ürünün birincil mor rengini ve diğer palet ailelerini tanımlar. Gündüz ve gece tema dosyaları daha sonra bu temel renkleri varsayılan metin, yardımcı metin, dolgulu yüzey ve kenarlık gibi rollere eşler. Gece modunda birincil metin rolü değişebilirken birincil dolgulu yüzey rolü aynı temel renkte kalabilir.

Önizleme; belge arka planı, metin, kenarlık ve soluk panel için anlamsal özellikleri kullanır. Bu nedenle kök öğedeki sgds-night-theme özelliğini açıp kapatmak hem özel öğeleri hem de çevrelerindeki düzeni günceller. Denetimlerin kendisi doğru biçimde değişse bile siyahı sabit kodlanmış bir paragraf bu ilişkiyi bozar.

Mor palet, yayımlanmış ürün varsayılanıdır; bir devlet kurumunu taklit etme gerekçesi değildir. Kurum kimliği ve onaylı antet kullanımı için ayrıca yetki alınmalıdır.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Gerçek değerlerle duyarlı tipografi

Kısa oran gösterimi yerine yayımlanan belirteci okuyun

Mevcut responsive.css dosyası, heading-xl için üç aralıkta sırasıyla 32, 36 ve 40 piksel; bunlara karşılık 40, 44 ve 48 piksel satır yüksekliği tanımlar. Değişiklikler 1024 ve 1440 pikselde gerçekleşir. Bunlar, 512 ve 768 piksellik daha küçük ızgara düzeni sınırlarından bağımsızdır. Body-md 16 piksel olarak kalır.

Kamuya açık tipografi genel bakışı, genel oranları ve eşleştirme ilkelerini açıklar; yayımlanan belirteç sayfasında ise her rol için kesin piksel karşılıkları bulunur. Bu başvuruda uygulama değerleri verilirken çalıştırılabilir bu karşılıklar kullanılır. HTML içinde başlık anlambilimini koruyup uygun bir görsel belirteç uygulayın; küçük bir bölüm başlığının yapay biçimde daha alt bir başlık düzeyine taşınması gerekmez.

Önerilen marka yazı tipi Inter'dir; kurulum belgelerinde 300, 400, 600 ve 700 ağırlıkları açıklanır. Yerel örnekte bunun yerine açıkça Arial kullanılır ve uzaktaki yazı tipleri yüklenmez. Hizmete entegre ederken yalnızca CSS aile adına güvenmek yerine seçtiğiniz yazı tipini yükleyip test edin.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Farklı aralık rolleri

Tüm boşlukları tek bir ölçeğe indirgemeyin

Temel boşluk ölçeğinde 4, 8, 12, 16 ve daha büyük değerlerin yanı sıra 2 piksel de bulunur. Sabit aralık takma adları ile duyarlı düzen, bileşen ve metin aralıkları bu temel değerlerin üzerine kurulur. Temel layout-gap-md değeri 16→24→32 piksel olarak değişirken text-gap-md değeri 12→16→16 piksel olarak değişir. Dolayısıyla “orta” sözcüğü her kullanımda aynı sayıyı ifade etmez.

Planlayıcı, iki içerik bölgesini (miktar denetimleri ve mevcut plan) bir arada tutmak için en fazla 888 piksel genişliğe ayarlanmıştır. 768 pikselin altında bu bölgeler alt alta dizilir. Bu, SGDS standart ızgarasının tamamının her zaman 888 pikselde durduğu anlamına gelmez. Daha geniş kapsamlı standart kapsayıcı kuralları başvuruda ayrı olarak listelenmiştir.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Sınırlandırılmış miktar denetimi

Miktar için quantity, tanımlayıcı için değil

Miktar artırma-azaltma denetimi, kişinin her seferinde bir birim değiştirebileceği küçük sayılar için uygundur. Örnekte 1–5 katılımcı ve 0–3 ortak kit seçilir. Bunlar örnek amaçlı sınırlardır; gerçek bir hizmet, sınırları mevcut kapasite veya politikaya göre belirlemeli ve ipucunda açıklamalıdır. Posta kodları, tanımlayıcılar ve kesin para tutarları için farklı bir giriş kullanılmalıdır.

Yerel bileşen, sayısal bir girişin etrafına azaltma ve artırma simgeli düğmeler yerleştirir. min, max ve step değerleri sayısaldır; value mevcut miktarı, label ve hintText ise bağlamı belirtir. Sınıra ulaşıldığında ilgili düğme kullanılamaz hâle gelir; doğrudan yazılan değerler için de kısıtlama doğrulaması gerekir.

hasFeedback, style, text veya her ikisi değerini alır. Örnekte her ikisi de kullanılır ve ayrıca belirli bir invalidFeedback mesajı verilir. Başka bir bileşenden API hasFeedback değerini Boole olarak kopyalamak, bu kesin yapılandırmayı kaybettirir.

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

Kod referansı

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Özeti senkronize tutun

İki olay yolu, tek veri kaynağı

Özet, her ana öğenin value değerini okur. Yazılan değişiklikler ile düğmelerle yapılan ve onaylanan değişiklikler aynı olay yolunu izlemeyebileceğinden hem sgds-input hem de sgds-change olaylarını dinler. İlk yerel örnekte yalnızca yazılan girişleri test etmek, artırma düğmesi güncellemelerinin gözden kaçmasına neden oldu; son örnek her iki olayı da işler.

Planı denetle eylemi, yerel öğelerin ikisinde de reportValidity çağrısı yapar ve yerel bir durum mesajı gösterir. Geçersiz bir sayıyı makul görünen bir toplama dönüştürmez. Sıfırla eylemi, ana öğelerin başlangıç değerlerini atar; setInvalid(false) ile uygulamada görünen geçersiz durumu temizler ve ardından updateComplete sonrasında özeti yeniler.

Devre dışı bırakılmış alan, salt okunur alanla aynı değildir: ilki form gönderimine dahil edilmezken ikincisi değerini korur. Gerçek bir hizmet, onaylanmış miktarı inceleme süresince sabit tutuyorsa sırf gri görünüm elde etmek için alanı devre dışı bırakmak yerine uygun durumu kullanmalıdır.

• Hem yazma hem de artırma düğmelerini destekleyen bir özette sgds-input ve sgds-change olaylarını kullanın.
• Shadow DOM'a erişmek yerine value değerini özel öğenin ana öğesinden okuyun.
• Yerel geçerlilik bildirimlerini başarılı rezervasyon veya gönderim bildirimlerinden ayrı tutun.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Kayıttan önce stiller

Tema bağımlılık zincirini yükleyin

Paketlenmiş bir uygulamada day.css, night.css ve css/sgds.css dosyalarını bu sırayla içe aktarın, ardından bileşen kitaplığını bir kez içe aktarın. Gündüz/gece dosyaları root.css dosyasını, bu dosya da responsive.css dosyasını içe aktarır. Temel stil dosyası reboot.css ve grid.css dosyalarını içe aktarır. Statik bir kopyada yalnızca ilk üç dosyayı değil, bu göreli bağımlılıkları da koruyun.

Resmî utility.css, Tailwind CSS v 4 yapılandırma giriş dosyasıdır. Yapılandırılmış bir Tailwind derleme sürecinden geçirilmelidir; düz bir tarayıcı stil sayfası olarak eklenmesi tüm sgds: yardımcı sınıflarını oluşturmaz. Bu örnek bunun yerine sıradan düzen CSS ve anlamsal özel özellikler kullanır; dolayısıyla yardımcı sınıflar için bir derleme gerektiğini varsaymaz.

Yalıtılmış tarayıcı örneği için yayımlanan dosya index.umd.min.js'dir. Paket meta verilerinde index.umd.js dosyası hâlâ belirtilir, ancak incelenen dağıtımda bu dosya yoktur. Yerel önizleme mevcut olan küçültülmüş paketi kullanır; npm kurulum yönergesi ise paketleyiciler için belgelenmiş içe aktarma biçimini kullanır.

1. 3.29.0 sürümünü sabitleyin ve temel kurallardan önce tema belirteçlerini içe aktarın.
2. Inter yazı tipini sağlayın veya test edilmiş bir yedek yazı tipini bilinçli olarak seçin.
3. Özel öğeleri yalnızca bir kez kaydedin; gerektiğinde tanımlarının tamamlanmasını bekleyin, ardından uygulama dinleyicilerini ekleyin.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Sınırları ve temayı birlikte test edin

Sınırlar entegrasyon hatalarını ortaya çıkarır

Katılımcılar değerini iki kez artırın; hem denetimin hem de özetin 3 gösterdiğini doğrulayın. Doğrudan 9 yazıp Planı denetle'yi seçin: bileşen aralık uyarısını göstermeli, durum mesajı da değerin düzeltilmesini istemelidir. Değeri 5 olarak düzeltin ve değer geçerliyken artırma denetiminin devre dışı olduğunu doğrulayın.

Miktarları girdikten sonra gece temasına geçin; değerlerin korunduğunu, özetin okunabilir kaldığını ve sınırların hâlâ doğru çalıştığını doğrulayın. Sıfırlayın, ardından klavyeyle tekrar deneyin: Tab tuşu girişe ve düğmelere mantıklı sırayla ulaşmalı; Enter veya Space tuşu odaktaki düğmeyi etkinleştirmelidir.

Yerel test, bileşen davranışını 1440, 768 ve 390 pikselde doğrular ve tema bağımlılıklarının yerel olarak sunulduğunu kontrol eder. Bu test, gelecekteki bir devlet hizmeti için tarayıcı desteğini veya erişilebilirlik sertifikasını kanıtlamaz. Böyle bir hizmet tüm akışı, metinleri, tema özelleştirmesini ve veri işleme süreçlerini test etmelidir.

Destekleyici belirtimi okuyun

Singapore Government tasarım sistemi Bileşen Örnekleri

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

npm install --save-exact @govtechsg/[email protected]

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>