Singapore Government Designsystem.

Singapore Government Designsystem Aktuelle SGDS-Familie auswählen

Webkomponenten und ältere Bootstrap-Seiten

SGDS v 3 verwendet @govtechsg/sgds-web-component. Dessen benutzerdefinierte Elemente, Theme-Tokens und aktuelle Utility-Integration bilden einen anderen Implementierungsweg als das ältere Stylesheet @govtechsg/sgds Bootstrap. Vermische keine Anweisungen für v 2 JavaScript mit Tags für v 3 und erwarte, dass die neuen Steuerelemente initialisiert werden.

Das Beispiel verwendet das tatsächliche Browser-Bundle 3.29.0, um Mengenschalter und Schaltflächen zu registrieren. Es zeigt einen eigenständigen Planer für Community-Workshops – ohne Masthead der Regierung Singapurs oder Behauptung einer Zugehörigkeit. Die Steuerelemente ändern nur lokale Werte; es gibt keinen Buchungs- oder Zahlungsvorgang.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Theme-Tokens sind in Ebenen angeordnet

Primitive Farben und ihre semantische Verwendung

Die Root-Datei definiert primitive Grautöne, das primäre Produktlila und die übrigen Palettenfamilien. Die Theme-Dateien für den Tag- und Nachtmodus ordnen diese Primitive anschließend Rollen wie Standardtext, ergänzendem Text, gefüllter Oberfläche und Rahmen zu. Eine Rolle für primären Text kann sich im Nachtmodus ändern, auch wenn die Rolle für die primär gefüllte Oberfläche weiterhin dasselbe Primitive verwendet.

Die Vorschau verwendet semantische Eigenschaften für Dokumenthintergrund, Text, Rahmen und gedämpftes Panel. Wird sgds-night-theme am Root-Element aktiviert, werden daher sowohl die benutzerdefinierten Elemente als auch die umgebende Komposition aktualisiert. Ein hartcodierter schwarzer Absatz würde diese Beziehung aufheben, obwohl die Steuerelemente selbst weiterhin korrekt umgeschaltet würden.

Die Lilapalette ist der veröffentlichte Produktstandard und kein Anlass, sich als Regierungsbehörde auszugeben. Für die Identität einer Behörde und die genehmigte Verwendung eines Mastheads ist eine eigene Autorisierung erforderlich.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Responsive Typografie mit konkreten Werten

Lies das ausgelieferte Token statt einer verkürzten Verhältnisangabe

Die aktuelle responsive.css ordnet heading-xl über die drei Bereiche hinweg 32, 36 und 40 px zu, mit Zeilenhöhen von 40, 44 und 48 px. Die Änderungen erfolgen bei 1024 und 1440 px. Sie sind unabhängig von den kleineren Layoutgrenzen des Rasters bei 512 und 768 px. Body-md bleibt bei 16 px.

Die öffentliche Typografieübersicht beschreibt allgemeine Verhältnisse und Prinzipien der Schriftkombination. Das ausgelieferte Token-Stylesheet enthält dagegen exakte Pixel-Aliase für jede Rolle. Diese Referenz verwendet die ausführbaren Aliase, wenn sie Implementierungswerte nennt. Behalte die semantische Überschriftenstruktur in HTML bei und weise ihr ein passendes visuelles Token zu; ein kleiner Abschnittstitel braucht keine künstlich niedrigere Überschriftenebene.

Inter ist die vorgesehene Markenschrift. In der Dokumentation zur Einrichtung sind die Schriftschnitte 300, 400, 600 und 700 aufgeführt. Das lokale Beispiel verwendet ausdrücklich ersatzweise Arial und lädt keine externen Schriftarten. Lade in einem Dienst, der das Designsystem übernimmt, die ausgewählte Schrift und teste sie, statt dich allein auf den Schriftfamiliennamen CSS zu verlassen.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Unterschiedliche Abstandsrollen

Fasse nicht alle Abstände zu einer einzigen Skala zusammen

Die primitive Abstandsskala enthält neben 4, 8, 12, 16 und größeren Werten auch 2 px. Darüber liegen feste Abstandsaliases sowie responsive Abstände für Layouts, Komponenten und Text. Ein Basiswert von layout-gap-md ändert sich von 16 über 24 auf 32 px, während sich text-gap-md von 12 über 16 auf 16 px ändert. „Mittel“ bedeutet also nicht für jeden Verwendungszweck denselben Zahlenwert.

Der Planer hat eine maximale Breite von 888 px, damit zwei kompakte Inhaltsbereiche nebeneinander Platz haben: die Mengeneinstellungen und den aktuellen Plan. Unter 768 px werden sie untereinander angeordnet. Das ist eine Anwendungskomposition und keine Behauptung, dass das vollständige SGDS-Standardraster immer bei 888 px endet. Die Referenz führt die umfassenderen Regeln für Standard-Container separat auf.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Ein Zähler mit begrenztem Wertebereich

Verwende „Menge“ für eine Anzahl, nicht für eine Kennung

Ein Mengenschalter eignet sich für eine kleine Anzahl, die jemand schrittweise anpassen kann. Im Beispiel werden 1–5 Teilnehmende und 0–3 gemeinsam genutzte Sets abgefragt. Das sind Einschränkungen für die Demonstration; in einem echten Dienst müssen sie sich aus der tatsächlichen Verfügbarkeit oder den geltenden Richtlinien ergeben und im Hinweis erläutert werden. Für Postleitzahlen, Kennungen und exakte Geldbeträge ist ein anderes Eingabefeld erforderlich.

Die native Komponente kombiniert eine Schaltfläche zum Verringern und eine zum Erhöhen mit einem Zahlenfeld. min, max und step sind numerisch, value enthält die aktuelle Anzahl, und label/hintText liefern den Kontext. Bei Erreichen einer Grenze ist die entsprechende Schaltfläche nicht verfügbar; für direkte Eingaben ist weiterhin eine Validierung der Einschränkungen erforderlich.

hasFeedback akzeptiert die Zeichenfolge style, text oder both. Das Beispiel verwendet both sowie eine konkrete Meldung in invalidFeedback. Würde hasFeedback wie bei einer anderen Komponente API als Boolean behandelt, ginge diese genaue Konfiguration verloren.

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

Code-Referenz

Unterstützende Spezifikation lesen

Singapore Government Designsystem Halte die Zusammenfassung synchron

Zwei Ereignispfade, eine Datenquelle

Die Zusammenfassung liest den Wert jedes Host-Elements aus. Sie reagiert sowohl auf sgds-input als auch auf sgds-change, da manuelle Eingaben und über Schaltflächen bestätigte Änderungen nicht zwingend denselben Ereignispfad verwenden. Beim ersten lokalen Beispiel wurden nur manuelle Eingaben getestet, sodass Aktualisierungen über die Schaltfläche zum Erhöhen fehlten; das endgültige Beispiel verarbeitet beide Ereignisse.

„Plan prüfen“ ruft für beide nativen Elemente reportValidity auf und zeigt eine lokale Statusmeldung an. Ein ungültiger Zahlenwert wird nicht in eine vermeintlich plausible Summe umgewandelt. „Zurücksetzen“ weist den Host-Elementen die ursprünglichen Werte zu und setzt den für die Anwendung sichtbaren ungültigen Zustand mit setInvalid(false) zurück. Nach updateComplete wird die Zusammenfassung aktualisiert.

Ein deaktiviertes Feld ist nicht dasselbe wie ein schreibgeschütztes Feld: Das deaktivierte Feld wird bei der Formularübermittlung ausgeschlossen, während der Wert eines schreibgeschützten Feldes erhalten bleibt. Wenn ein echter Dienst eine bestätigte Anzahl zur Überprüfung fixiert, verwende den passenden Zustand, statt das Feld nur für eine graue Darstellung zu deaktivieren.

• Verwende sgds-input und sgds-change, wenn eine Zusammenfassung sowohl manuelle Eingaben als auch die Schaltflächen zum Erhöhen und Verringern berücksichtigt.
• Lies value am Host des benutzerdefinierten Elements aus, statt auf dessen Shadow DOM zuzugreifen.
• Halte lokale Validierungshinweise klar getrennt von einer erfolgreichen Reservierung oder Übermittlung.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Styles vor der Registrierung

Lade die Theme-Abhängigkeiten in der richtigen Reihenfolge

Importiere in einer gebündelten Anwendung day.css, night.css und css/sgds.css in dieser Reihenfolge und anschließend die Komponentenbibliothek genau einmal. Die Dateien für den Tag- und Nachtmodus importieren root.css, das wiederum responsive.css importiert. Die Foundation-Datei importiert reboot.css und grid.css. Bei einer statischen Kopie müssen diese relativen Abhängigkeiten erhalten bleiben – nicht nur die ersten drei Dateien.

Die offizielle utility.css ist ein Konfigurationseinstieg für Tailwind CSS v 4. Sie muss durch einen konfigurierten Tailwind-Build verarbeitet werden. Wird sie einfach als Browser-Stylesheet eingebunden, werden nicht alle sgds: Utility-Klassen generiert. Dieses Beispiel verwendet stattdessen gewöhnliche Layout-CSS und semantische benutzerdefinierte Eigenschaften; ein Utility-Build ist daher nicht vorgesehen.

Für das isolierte Browserbeispiel ist die veröffentlichte Datei index.umd.min.js. In den Paketmetadaten wird zwar weiterhin index.umd.js erwähnt, diese Datei fehlt jedoch in der untersuchten Distribution. Die lokale Vorschau verwendet das tatsächlich vorhandene minimierte Bundle; das npm-Setup verwendet den dokumentierten Paketimport für Bundler.

1. Version 3.29.0 festschreiben und Theme-Tokens vor den Foundation-Regeln importieren.
2. Inter bereitstellen oder bewusst eine getestete Ersatzschrift wählen.
3. Die Custom Elements einmal registrieren, bei Bedarf auf ihre Definition warten und anschließend die Anwendungs-Listener anhängen.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Grenzen und Theme gemeinsam testen

Grenzwerte machen Integrationsfehler sichtbar

Participants zweimal erhöhen und prüfen, ob sowohl das Steuerelement als auch die Zusammenfassung 3 anzeigen. Direkt 9 eingeben und Check plan ausführen: Die Komponente sollte den Hinweis zu ihrem Wertebereich anzeigen und der Status zur Korrektur auffordern. Den Wert auf 5 korrigieren und bestätigen, dass die Erhöhen-Schaltfläche deaktiviert ist und der Wert weiterhin gültig bleibt.

Nach der Eingabe von Mengen zum Nacht-Theme wechseln und prüfen, ob die Werte erhalten bleiben, die Zusammenfassung lesbar bleibt und die Grenzwerte weiterhin korrekt funktionieren. Zurücksetzen und dann den Ablauf mit der Tastatur wiederholen: Mit Tab sollten Eingabefeld und Schaltflächen in einer sinnvollen Reihenfolge erreichbar sein; Enter oder Leertaste sollte eine fokussierte Schaltfläche aktivieren.

Der lokale Test überprüft das Verhalten der Komponente bei 1440, 768 und 390 px und stellt sicher, dass die Theme-Abhängigkeiten lokal bereitgestellt werden. Er belegt weder die Browserunterstützung noch eine Barrierefreiheitszertifizierung für einen künftigen staatlichen Dienst. Dieser Dienst muss den gesamten Ablauf, die Formulierungen, die Theme-Anpassung und den Umgang mit Daten testen.

Unterstützende Spezifikation lesen

Singapore Government Designsystem Beispiele für Komponenten eines Designsystems

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