Système de design Singapore Government.

Choisir la famille SGDS actuelle système de design Singapore Government

Composants web et anciennes pages Bootstrap

SGDS v 3 utilise @govtechsg/sgds-web-component. Ses éléments personnalisés, ses jetons de thème et son intégration actuelle des utilitaires suivent une voie d’implémentation différente de l’ancienne feuille de style @govtechsg/sgds Bootstrap. Ne mélangez pas les instructions de SGDS v 2 JavaScript avec les balises v 3 en vous attendant à ce que les nouveaux contrôles s’initialisent.

L’exemple utilise le véritable bundle navigateur 3.29.0 pour enregistrer les contrôles de quantité et les boutons. Il présente un planificateur original d’atelier communautaire, sans en-tête du gouvernement de Singapour ni revendication d’affiliation. Les contrôles modifient uniquement les valeurs locales ; aucun processus de réservation ou de paiement n’est prévu.

Consultez la spécification associée

Les jetons de thème système de design Singapore Government sont organisés en couches

Couleurs primitives et usage sémantique

Le fichier racine définit les gris primitifs, le violet product-primary et les autres familles de palettes. Les fichiers de thème clair et sombre associent ensuite ces primitifs à des rôles tels que le texte par défaut, le texte secondaire, la surface pleine et la bordure. Un rôle de texte principal peut changer en mode sombre même si le rôle de surface pleine principale reste associé au même primitif.

L’aperçu utilise des propriétés sémantiques pour l’arrière-plan du document, le texte, les bordures et le panneau atténué. Basculer sgds-night-theme sur la racine met donc à jour à la fois les éléments personnalisés et la composition qui les entoure. Un paragraphe noir codé en dur romprait cette cohérence, même si les contrôles continuaient de basculer correctement.

La palette violette est la palette par défaut publiée du produit ; elle ne justifie pas de se faire passer pour un organisme gouvernemental. L’identité d’un organisme et l’usage d’un en-tête approuvé nécessitent une autorisation distincte.

Consultez la spécification associée

Typographie adaptative avec valeurs réelles système de design Singapore Government

Lisez le jeton fourni plutôt qu’un ratio abrégé

Le fichier responsive.css actuel associe heading-xl à 32, 36 et 40 px pour ses trois plages, avec des interlignes de 40, 44 et 48 px. Les changements interviennent à 1024 et 1440 px. Ils sont indépendants des seuils de mise en page plus bas de la grille, à 512 et 768 px. Body-md reste à 16 px.

La présentation publique de la typographie décrit les ratios généraux et les principes d’association, tandis que la feuille de jetons fournie contient les alias exacts en pixels pour chaque rôle. Cette référence s’appuie sur ces alias exploitables pour indiquer les valeurs d’implémentation. Conservez la sémantique des titres dans HTML et appliquez un jeton visuel approprié ; un petit titre de section n’a pas besoin d’un niveau de titre artificiellement inférieur.

Inter est la police de marque prévue ; les graisses 300, 400, 600 et 700 sont documentées dans la configuration. Le spécimen local utilise explicitement Arial à la place et ne charge aucune police distante. Dans un service qui adopte ce système, chargez et testez la police choisie au lieu de vous fier uniquement au nom de famille CSS.

Consultez la spécification associée

Système de design Singapore Government Différents rôles d’espacement

Ne ramenez pas tous les espacements à une seule échelle

L’échelle des espacements primitifs comprend 2 px, ainsi que 4, 8, 12, 16 px et des valeurs supérieures. Les alias d’espacement fixes et les espacements responsives de mise en page, de composants et de texte s’appuient sur ces valeurs primitives. Un layout-gap-md de base passe de 16 à 24 puis à 32 px, tandis que text-gap-md passe de 12 à 16 puis reste à 16 px. Le même terme, « moyen », ne correspond donc pas à la même valeur dans tous les cas.

Le planificateur applique une largeur maximale de 888 px pour réunir deux zones de contenu de taille modeste : les commandes de quantité et le plan en cours. En dessous de 768 px, elles s’empilent. Il s’agit d’une composition propre à l’application, et non d’une affirmation selon laquelle la grille standard SGDS complète s’arrête toujours à 888 px. La référence présente séparément les règles générales des conteneurs standard.

Consultez la spécification associée

Système de design Singapore Government Un contrôle de quantité avec limites

Utilisez quantity pour une quantité, pas pour un identifiant

Un sélecteur de quantité convient pour un petit nombre qu’une personne peut ajuster unité par unité. Le spécimen demande 1 à 5 participants et 0 à 3 kits partagés. Ces limites sont données à titre d’exemple ; un service réel doit les déterminer selon les disponibilités ou les règles en vigueur et les préciser dans l’indication. Les codes postaux, les identifiants et les montants exacts nécessitent un autre type de champ.

Le composant natif place des boutons d’icône de diminution et d’augmentation autour d’un champ numérique. Ses propriétés min, max et step sont numériques, value reflète la quantité actuelle, et label/hintText fournissent le contexte. Lorsque la limite est atteinte, le bouton correspondant devient indisponible ; la saisie directe doit également faire l’objet d’une validation des contraintes.

hasFeedback accepte les valeurs chaîne style, text ou les deux. L’exemple utilise les deux, ainsi qu’un message invalidFeedback précis. Traiter hasFeedback comme un booléen copié d’un autre composant API ferait perdre cette configuration exacte.

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

Référence du code

Consultez la spécification associée

Système de design Singapore Government Gardez le récapitulatif synchronisé

Deux flux d’événements, une seule source de données

Le récapitulatif lit la valeur de chaque élément hôte. Il écoute à la fois sgds-input et sgds-change, car les modifications saisies au clavier et celles validées par les boutons ne suivent pas nécessairement le même flux d’événements. Dans le premier spécimen local, les tests limités à la saisie au clavier n’ont pas détecté les mises à jour déclenchées par le bouton d’incrémentation ; l’exemple final gère les deux cas.

Check plan appelle reportValidity sur les deux éléments natifs et affiche un message d’état local. Il ne transforme pas un nombre invalide en un total plausible. Reset rétablit les valeurs initiales des éléments hôtes et efface l’état invalide visible par l’application à l’aide de setInvalid(false), puis actualise le récapitulatif après updateComplete.

Un champ désactivé n’équivaut pas à un champ en lecture seule : le premier est exclu de la soumission du formulaire, tandis que le second conserve sa valeur. Si un service réel verrouille une quantité confirmée pendant la vérification, utilisez l’état approprié au lieu de la désactiver uniquement pour lui donner un aspect grisé.

• Utilisez sgds-input et sgds-change lorsqu’un récapitulatif doit gérer à la fois la saisie au clavier et les boutons d’incrémentation.
• Lisez value sur l’élément personnalisé hôte plutôt que d’accéder à son DOM fantôme.
• Distinguez clairement les messages de validation locaux d’une réservation ou d’une soumission réussie.

Consultez la spécification associée

Système de design Singapore Government Les styles avant l’enregistrement

Chargez la chaîne de dépendances du thème

Dans une application regroupée, importez day.css, night.css et css/sgds.css dans cet ordre, puis importez la bibliothèque de composants une seule fois. Les fichiers day et night importent root.css, qui importe responsive.css. Le fichier de base importe reboot.css et grid.css. Une copie statique doit conserver ces dépendances relatives, et pas seulement les trois premiers fichiers.

Le fichier officiel utility.css est un point d’entrée de configuration Tailwind v 4. Il doit passer par une compilation Tailwind configurée ; l’ajouter comme simple feuille de style dans le navigateur ne génère pas toutes les classes utilitaires sgds:. Ce spécimen utilise plutôt une mise en page ordinaire CSS et des propriétés personnalisées sémantiques ; aucune compilation des utilitaires n’est donc implicite.

Pour l’exemple isolé dans le navigateur, le fichier publié est index.umd.min.js. Les métadonnées du paquet mentionnent encore index.umd.js, mais ce fichier est absent de la distribution examinée. L’aperçu local utilise le bundle minifié réellement fourni ; la configuration npm utilise l’importation du paquet documentée pour les outils de bundling.

1. Verrouillez la version 3.29.0 et importez les jetons du thème avant les règles de base.
2. Fournissez Inter ou choisissez délibérément une police de remplacement et testez-la.
3. Enregistrez les éléments personnalisés une seule fois, attendez leur définition si nécessaire, puis ajoutez les écouteurs d’événements de l’application.

Consultez la spécification associée

Système de design Singapore Government Testez ensemble les limites et le thème

Les limites révèlent les erreurs d’intégration

Cliquez deux fois sur Participants et vérifiez que le contrôle et le récapitulatif affichent tous deux 3. Saisissez directement 9, puis lancez Check plan : le composant doit afficher un message indiquant que la valeur est hors plage et le statut doit demander une correction. Remplacez-la par 5 et vérifiez que le contrôle d’incrémentation est désactivé alors que la valeur reste valide.

Passez au thème sombre après avoir saisi les quantités et vérifiez que les valeurs sont conservées, que le récapitulatif reste lisible et que les limites fonctionnent toujours correctement. Réinitialisez, puis recommencez au clavier : la touche Tab doit parcourir le champ et les boutons dans un ordre logique, et la touche Entrée ou la barre d’espace doit activer le bouton sélectionné.

Le test local vérifie le comportement des composants à 1440, 768 et 390 px, et confirme que les dépendances du thème sont servies localement. Il ne garantit ni la compatibilité avec les navigateurs ni la certification d’accessibilité d’un futur service gouvernemental. Ce service devra tester l’ensemble de son parcours, ses textes, la personnalisation du thème et le traitement des données.

Consultez la spécification associée

Exemples de composants du système de design système de design Singapore Government

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