# Singapore Government tasarım sistemi

## Singapore Government tasarım sistemi Arayüz Önizlemesi

Artırın, geçersiz bir miktar girin, doğrulayın, sıfırlayın ve değerleri kaybetmeden yerel gündüz/gece belirteçlerini değiştirin.

## Singapore Government tasarım sistemi Tasarım Başvurusu

Singapur SGDS web bileşenleri 3.29.0, yayımlanmış tema dosyaları, duyarlı belirteçler ve custom-elements manifest. Önizleme, özgün index.umd.min.js paketini yerel tema içe aktarımlarıyla çalıştırır. Açıkça belirtilmiş Arial yedeği kullanır; Tailwind yardımcı sınıf derlemesi ve resmî başlık bandı içermez. v3 paketi, v2 Bootstrap tabanlı SGDS'den farklıdır.

### Gerçek duyarlı yazı tipi belirteçleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | Temel, 1024px ve 1440px aralıkları; ilişkili line-height-xl 40→44→48px. |
| --sgds-font-size-heading-md | 24→26→28px | İlişkili line-height-md 28→32→32px. |
| --sgds-font-size-heading-sm | 20→22→24px | Kompakt bölüm başlığı rolü. |
| --sgds-font-size-body-md | 16px in all three ranges | Body-lg 18→20→20px; body-sm 14px. |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | Yazı tipi dosyaları ayrı yüklenir; önizleme Arial kullanacak şekilde geçersiz kılınır. |
| --sgds-font-weight-* | 300,400,600,700 | Light, regular, semibold, bold. |
| --sgds-letter-spacing-tight | -0.4px | root.css içindeki başlık harf aralığı. |
### Temel ve anlamsal tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | gray1000→gray100 eşlemesi; gövde metni sabit kodlanmamıştır. |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | Kök yüzey, sgds-night-theme ile değişir. |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | Destekleyici metin; eşleştirildiği yüzeyde yeterli kontrastı koruyun. |
| --sgds-primary-surface-default | #6b4feb | Geçerli her iki tema dosyasında da Product-primary600. |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | Metin rolü, dolgulu yüzey rolünden farklıdır. |
| --sgds-border-color-default | Day#868686 | Gece teması kenarlıklarının tümünde aynı temel rengi yeniden kullanmayın. |
### Boşluklar, kenarlıklar ve duyarlı değişiklikler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | 16px kök boyutunda rem olarak ifade edilen değerler; bunlar temel belirteçlerdir. |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | Sabit anlamsal boşluklar. |
| --sgds-layout-gap-md | 16→24→32px | Gerçek pakette 1024/1440px değerlerinde duyarlıdır; bunlar 512/768 ızgara kırılma noktaları değildir. |
| --sgds-text-gap-md | 12→16→16px | Metin aralığının kendine ait duyarlı bir rolü vardır. |
| --sgds-form-border-radius-md | 8px | border-radius-md diğer adı. |
| --sgds-form-border-width-default | 1px | border-width-1 diğer adı. |
### Standart ızgara başvurusu

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8 sütun; 16px oluklar; 20/24px sabit kenar boşlukları. |
| md | 768–1023px | 8 sütun; 24px oluklar; 28px sabit kenar boşlukları. |
| lg | 1024–1279px | 12 sütun; 888px kapsayıcı; 24px oluklar. |
| xl | 1280–1439px | 12 sütun; 1168px kapsayıcı; 32px oluklar. |
| 2xl | 1440px+ | 12 sütun; 1312px kapsayıcı; 32px oluklar. |
| Preview composition | 888px maximum;two columns→one below768px | Standart ızgara ön ayarlarının tümünü uygulamayan, bilinçli olarak küçük tutulmuş bir planlayıcı bileşimi. |
### QuantityToggle genel API arayüzü

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | Yerel bir olaydan sonra öğe değerini okuyun. |
| min / max | Number constraints | Seçilen hizmet sınırlarını hintText ile açıklayın. |
| label / hintText | String properties/attributes | Erişilebilir alan adını ve görünür aralık yardımını sağlayın. |
| hasFeedback | style \| text \| both | Düz Boole özniteliği değil, dize değerli bir geri bildirim modu. |
| invalidFeedback / invalid | Message /Boolean state | İlgisiz bir kırmızı kenarlık yerine bileşenin geri bildirimini kullanın. |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | Yazılan değişiklikleri ve düğmeleri destekleyen bir özet için hem input hem change olaylarını dinleyin. |
| Validation methods | checkValidity();reportValidity() | Boole türünde kısıt sonuçları döndürün; geri bildirimi göstermek için reportValidity kullanın. |
| readonly versus disabled | Visible fixed value versus unavailable control | Devre dışı bırakılan değer form gönderimine dahil edilmez; salt okunur değer ise korunur. |
## Singapore Government tasarım sistemi Tam 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ı.

## 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

### Sınırlandırılmış miktarlar ve iki olay yolu

Yerel bir denetim ve onunla senkronize çıktı.

```
<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ı

### v3 kurulumu

Doğru tema sırası, kitaplık kaydı ve Tailwind yardımcı sınıflarının açık sınırı.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* 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');
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!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>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Singapore Government tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Bağımsız önizleme, doğrulanmış özgün index.umd.min.js paketini ve yerel CSS bağımlılık zincirini kullanır. npm yönergesi paketleyici içindir; utility.css, Tailwind v4 gerektirir ve bu statik önizlemede bilerek kullanılmamıştır. Sources bölümündeki eksiksiz çalışan örnek ZIP dosyası, tam belgeyle birlikte önizlemenin bağımlılıklarını da içerir. Dosyaları çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/singapore-sgds.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* 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');
```

### Projeniz İçin Bir İstem

```
Gerçek 3.29.0 sgds-quantity-toggle ve sgds-button öğelerini kullanarak Singapur SGDS v3 için bir planlayıcı oluşturun. Gündüz/gece/kök/duyarlı belirteç zincirinin tamamını ve temel stilleri içe aktarın, ardından yerel bileşenleri kaydedin. Katılımcı ve malzeme kiti miktarları için sınırlar belirleyin; hasFeedback="both", kesin etiket ve ipuçları, yazılan değerler için doğrulama ve hem sgds-input hem de sgds-change olaylarını dinleyen senkronize bir özet sağlayın. Tema değiştirildiğinde değerler sıfırlanmadan kök öğedeki sgds-night-theme özelliği açılıp kapanmalıdır. Yerel geçerlilik ile rezervasyon arasındaki farkı koruyun. v2 Bootstrap kodunu yüklemeyin ve düz utility.css dosyasının Tailwind sınıfları oluşturduğunu iddia etmeyin.
```

## Singapore Government tasarım sistemi Kaynaklar ve Kapsam

MIT lisanslı kod ve özgün atölye içeriği kullanan bağımsız uygulama örneği. Herhangi bir devlet kurumu anteti, kurumsal bağlılık, rezervasyon, ağ üzerinden gönderim veya resmî politika sınırı ima edilmez.

- Geliştirme v3 kurulumu ve CSS içe aktarma sırası.

- Miktar Amaç, kısıtlamalar ve denetim davranışı.

- Aralık Sabit ve duyarlı boşluk rolleri.

- Heading Başlık rolü takma adları.

- Tür Tipografi amacı ve yazı tipi yönergeleri.

- Izgara Standart duyarlı ızgara ön ayarları.

- Ekran genişliği eşikleri Izgara kesme noktası ve kapsayıcı başvuru kılavuzu.

- Tasarım belirteçleri Katmanlı belirteç modeli.

- Anlamsal Anlamsal renk rolleri.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Singapore Government tasarım sistemi İlgili Kaynaklar

### Decanter

Decanter’ın Tailwind ön ayarı, duyarlı tipografi ölçeği ve esnek ekran kenarlarıyla akademik editoryal sayfalar oluşturun. Çalışan konu filtreleri ve genişletilebilir özetler içeren özgün etkinlik kartlarını keşfedin.

### Suomi.fi tasarım sistemi

Source Sans 3, açıkça tanımlanmış boşluk belirteçleri ve kurtarılabilir belge seçimi düzeniyle okunaklı Fince kamu hizmeti formları oluşturun.

### UNDP tasarım sistemi

UNDP’nin yayımladığı renk ve boşluk belirteçlerini, klavyeyle kullanılabilen yerel sekmeleri ve yerel inceleme ilerlemesini içeren eksiksiz bir atölye okuma örneğini keşfedin.


- [Uygulama başvurusu](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Kaynak](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Kaynak](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Kaynak](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css)
- [Kaynak](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Kaynak](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Destekleyici belirtimi okuyun](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Destekleyici belirtimi okuyun](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Kod referansı](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Destekleyici belirtimi okuyun](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Kod referansı](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Kod referansı](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Geliştirme v3 kurulumu ve CSS içe aktarma sırası.](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Miktar Amaç, kısıtlamalar ve denetim davranışı.](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Aralık Sabit ve duyarlı boşluk rolleri.](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Heading Başlık rolü takma adları.](https://www.designsystem.tech.gov.sg/foundations/typography/heading)
- [Tür Tipografi amacı ve yazı tipi yönergeleri.](https://www.designsystem.tech.gov.sg/foundations/typography)
- [Izgara Standart duyarlı ızgara ön ayarları.](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid)
- [Ekran genişliği eşikleri Izgara kesme noktası ve kapsayıcı başvuru kılavuzu.](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Tasarım belirteçleri Katmanlı belirteç modeli.](https://www.designsystem.tech.gov.sg/foundations/design-tokens)
- [Anlamsal Anlamsal renk rolleri.](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)